学习mpvue记录

安装

vue init mpvue/mpvue-quickstart learn-mpvue

npm install sass-loader node-sass --save-dev
npm install vue-template-compiler -D

eslint

• 规避报错
  注释掉webpack.base.conf.js里的

      // {
      //   test: /\.(js|vue)$/,
      //   loader: 'eslint-loader',
      //   enforce: 'pre',
      //   include: [resolve('src'), resolve('test')],
      //   options: {
      //     formatter: require('eslint-friendly-formatter')
      //   }
      // },

• npm run lint
  注意一定要在package.json里面加--fix

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --fix --ext .js,.vue src"
  },

插件

• mpvue-entry 集中式页面配置
• mpvue-router-patch 路由管理

用原生小程序UI

以 vant-weapp 为例，把文件复制到项目的/static/vant/目录下，然后在页面配置里写用到的组件，即可

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
  }
}

引 iconfont 图标

目前最优的方式是将图标添加至项目，然后用font-class方式引入

将链接里的css右键打开复制到static目录下的iconfont.css里
然后在App.vue目录下引入

@import '../static/css/iconfont.css';

用的时候

就可以了

配置vuex

比原来的vue项目要多这一步：
main.js中引入store, 并绑定到Vue构造函数的原型上，这样在每个vue的组件都可以通过this.$store访问store对象

import store from './store/index'
Vue.prototype.$store = store