记 mpvue 开发

1.页面如果不想使用main.js，可以使用mpvue-entry插件,届时页面路由将通过一个js文件来统一配置，不要忘记在webpack.base.conf.js里面使用mpvue-entry,要想webpack生成小程序的页面,必须要先配置路由文件

const path = require('path')
const fs = require('fs')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const MpvuePlugin = require('webpack-mpvue-asset-plugin')
const MpvueEntry = require('mpvue-entry')
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const entry =MpvueEntry.getEntry('./src/router/routes.js')

module.exports = {
  // 如果要自定义生成的 dist 目录里面的文件路径，
  // 可以将 entry 写成 {'toPath': 'fromPath'} 的形式，
  // toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js
  entry,
  target: require('mpvue-webpack-target'),
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
......

module.exports = [
  {
    path: 'pages/home/index',
    name: 'commonplace',
    config: {
      navigationBarTitleText: 'xxx',
      enablePullDownRefresh: true
    }
  },
  {
    path: 'pages/home/secondplace',
    name: 'secondplace',
    config: {
      navigationBarTitleText: 'xxx',
      enablePullDownRefresh: true
    }
  },
  {
    path: 'pages/equipment/list',
    name: 'equipmentlist',
    config: {
      navigationBarTitleText: 'xxx',
      enablePullDownRefresh: true
    }
  }
]

main.js里面使用

import MpvueRoterPatch from 'mpvue-router-patch'

Vue.config.productionTip = false

Vue.use(MpvueRoterPatch)

2.使用第三方样式

之前看网上说的是在main.js里面import,结果我就一直报错，最后我放在了App.vue的style标签内。

3.npm run dev 一直没反应

a.检查新建的vue界面是否有template,如果有，是否有script标签。或者vue页面什么都不留

b.删掉dist,node_modules,重新install吧