微信小程序mpvue+Vant Weapp初始化

准备工作:

1.安装node.js nodejs官网
[crayon-5f9582441b088479837719/]
2.安装淘宝镜像cnpm

3.安装vue-cli脚手架构建工具

第一步、创建一个基于 mpvue-qUIckstart 模板的新项目

可参考mpvue官网

随即一路回车就好 (ESlint要是嫌麻烦可以选择N不装)

第二步、进入项目->安装依赖->启动项目

运行成功之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。
Vue开发环境已经搭建好,接下来打开微信.发者工具,打开我们的项目my-project

第三步、引入Vant Weapp小程序 UI 组件库

可参考Vant Weapp官网

安装完后,打开项目里的build/Webpack.base.conf.js文件,在basewebpackConfig.plugins数组里增加多一个CopyWebpackPlugin。主要是为了mpvue在编译成微信小程序开发语言的时候,也顺带把vant组件复制到目录里,这样的话才能被项目找到。

微信小程序mpvue+Vant Weapp初始化
image.png
第四步、代码里引用vant

在src/app.json文件用全局引用某个组件,比如按钮组件

页面中直接引用组件就好了

注意:在微信开发者工具中选择ES6 转 ES5,否则要报错

第五步、重启项目,就可以在微信开发者工具中查看效果了

未经允许不得转载:一点博客-青梅煮码-共享博客 » 微信小程序mpvue+Vant Weapp初始化
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏