微信小程序-mpvue+vant框架搭建（微信小程序开发ui框架）

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/],再重跑项目时候将自动复制过去）。之后重跑项目(确认有dist/wx/vant-weapp/)主要是为了mpvue在编译成微信小程序开发语言的时候，也顺带把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即可。不然可能会报错。