mpvue小程序

1、搭建mpvue脚手架

第一步，基于mpvue-quickstart模板创建新项目

vue init mpvue/mpvue-quickstart my-project

第二步，安装依赖和运行

				cd my-project
				npm install
				npm run dev

2、打开微信开发者工具

    设置AppId
    勾选"不校验合法域名"

3、集成scss

npm i -D sass-loader node-sass
由于不可描述的原因，sass-loader应该在7.3.1版本之下，免得会报错

4、集成vant-weapp组件库

官网：https://youzan.github.io/vant-weapp
安装依赖： npm i vant-weapp -S --production
引入组件：

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小慕读书",
    "navigationBarTextStyle": "black"
  },
  "usingComponents": {
    "van-button": "vant-weapp/dist/button/index"
  }
}

使用组件：<van-button type="primary">按钮</van-button>
修改构建配置：因为微信小程序中不能直接访问道node modules，此时需要修改

webpack.base.config.js中的配置
if (/^wx$/.test(PLATFORM)) {
  baseWebpackConfig = merge(baseWebpackConfig, {
    plugins: [
      new CopyWebpackPlugin([{
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }])
    ]
  })
}

集成mpvue-router-patch插件

是我们在mpvue中可以使用vue的路由方法

npm i -S mpvue-router-patch

import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)