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

准备工作：

1.安装node.js nodejs官网

//可查看node版本
$ node -v
$npm -v

2.安装淘宝镜像cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

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

$ cnpm install -g vue-cli

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

可参考mpvue官网

$ vue init mpvue/mpvue-quickstart my-project

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

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

$ cd my-project
$ npm install
$ npm run dev

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

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

可参考Vant Weapp官网

# 通过 npm 安装
npm i vant-weapp -S --production

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

new CopyWebpackPlugin([
      {
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }
    ])

image.png

第四步、代码里引用vant

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

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

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

   
   
    
    默认按钮
   
   
   
   
    
    主要按钮
   
   
   
   
    
    信息按钮
   
   
   
   
    
    警告按钮
   
   
   
   
    
    危险按钮
   
   

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

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

$ npm run dev