准备工作：
1.安装node.js nodejs官网
[crayon-5f9582441b088479837719/]
2.安装淘宝镜像cnpm
|
1 2 |
$ npm install -g cnpm --registry=https://registry.npm.taobao.org |
|
1 2 |
$ cnpm install -g vue-cli |
第一步、创建一个基于 mpvue-qUIckstart 模板的新项目
可参考mpvue官网
|
1 2 |
$ vue init mpvue/mpvue-quickstart my-project |
随即一路回车就好 （ESlint要是嫌麻烦可以选择N不装）
第二步、进入项目->安装依赖->启动项目
|
1 2 3 4 |
$ cd my-project $ npm install $ npm run dev |
运行成功之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。
Vue开发环境已经搭建好，接下来打开微信.发者工具,打开我们的项目my-project
第三步、引入Vant Weapp小程序 UI 组件库
可参考Vant Weapp官网
|
1 2 3 |
# 通过 npm 安装 npm i vant-weapp -S --production |
安装完后，打开项目里的build/Webpack.base.conf.js文件，在basewebpackConfig.plugins数组里增加多一个CopyWebpackPlugin。主要是为了mpvue在编译成微信小程序开发语言的时候，也顺带把vant组件复制到目录里，这样的话才能被项目找到。
|
1 2 3 4 5 6 7 8 |
new CopyWebpackPlugin([ { from: resolve('node_modules/vant-weapp/dist'), to: resolve('dist/wx/vant-weapp/dist'), ignore: ['.*'] } ]) |
image.png
第四步、代码里引用vant
在src/app.json文件用全局引用某个组件，比如按钮组件
|
1 2 3 4 |
"usingComponents": { "van-button": "vant-weapp/dist/button/index" } |
页面中直接引用组件就好了
|
1 |
<van-button type="default">默认按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button> |
注意：在微信开发者工具中选择ES6 转 ES5，否则要报错
第五步、重启项目，就可以在微信开发者工具中查看效果了
|
1 2 |
$ npm run dev |
未经允许不得转载：一点博客-青梅煮码-共享博客 » 微信小程序mpvue+Vant Weapp初始化
评论抢沙发