微信小程序-mpvue+vant框架搭建

1.确认npm的安装

node -v npm -v

2.安装cpm

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

3.安装vue/cli

cnpm install -g @vue/cli

4.进入项目空间路径，初始化项目

vue init mpvue/mpvue-quickstart projectName

ps:ESLint新手最好关闭，严格模式，语法验证

或者：基于分包机制-选装mp-entry和mp路由

vue init F-loat/mpvue-quickstart my-project

5.下载依赖

cd projectName $ cnpm install $ npm run dev

之后在微信开发工具中就可以预览了。

6.添加vant组件

cnpm i vant-weapp -S --production

添加成功后在package.json文件中查看dependencies依赖是否包含了vant-weapp。再打开项目里的build/webpack.base.conf.js文件，在baseWebpackConfig.plugins数组里增加代码如下图所示的（为了将vant组件复制到路径[dist/wx/vant-weapp/],再重跑项目时候将自动复制过去）。之后重跑项目就可以把vant组件复制到目录里。

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

7.引用vant，在src/app.json

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

8.注意要勾选ES6转ES5即可。