详解如何搭建mpvue框架搭配vant组件库的小程序项目


Posted in Javascript onMay 16, 2019

1. vant 介绍

详解如何搭建mpvue框架搭配vant组件库的小程序项目

### 扫码体验

详解如何搭建mpvue框架搭配vant组件库的小程序项目

Vant - 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网

2. 在普通小程序怎么使用 vant 组件

使用之前

使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包,详见npm 支持

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production

方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码,并将 distlib 目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

使用组件

以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可

某些小程序框架会要求关闭 ES6ES5 选项,可以引入 lib 目录内 es5 版本的组件

es6

"usingComponents": {
 "van-button": "/path/to/vant-weapp/dist/button/index"
}

es5

"usingComponents": {
 "van-button": "/path/to/vant-weapp/lib/button/index"
}

接着就可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

在开发者工具中预览示例小程序

# 安装项目依赖
npm install

# 执行组件编译
npm run dev

3. 使用 mpvue

详解如何搭建mpvue框架搭配vant组件库的小程序项目 

mpvue (github 地址请参见) 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心, mpvue 修改了 Vue.jsruntimecompiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

初始化一个 mpvue 项目

如果没有安装 vue-cli ,先安装 vue-cli

npm install --global vue-cli

创建一个基于 mpvue-quickstart 模板的新项目

vue init mpvue/mpvue-quickstart my-project

安装依赖

cd my-project

# npm
npm install
npm run dev

#yarn
yarn
yarn start

4. 在 mpvue 里使用 less

下载 less 到项目中

npm install less less-loader --save

导入 loader

webpack.base.conf.jsrules 里添加一条规则

{
  test: /.less$/,
  loader: "style-loader!css-loader!less-loader"
},

在 mpvue 里使用 axios

axios 介绍

详解如何搭建mpvue框架搭配vant组件库的小程序项目

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 #Javascript
怎样在vue项目下添加ESLint的方法
May 16 #Javascript
eslint 的三大通用规则详解
May 16 #Javascript
webpack项目使用eslint建立代码规范实现
May 16 #Javascript
Vue项目中使用jquery的简单方法
May 16 #jQuery
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 #Javascript
You might like
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
javascript globalStorage类代码
2009/06/04 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python提取xml里面的链接源码详解
2019/10/15 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Python Http请求json解析库用法解析
2020/11/28 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
安全员岗位职责
2013/11/11 职场文书
技术总监管理职责范本
2014/03/06 职场文书
国培计划培训感言
2014/03/11 职场文书
职务说明书范文
2014/05/07 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
应聘护士求职信
2014/07/21 职场文书
村级四风对照检查材料
2014/08/24 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
房产公证书
2015/01/23 职场文书
预备党员个人总结
2015/02/14 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技