mpvue 的出现把 vue 的开发体验带到了小程序这个平台中,但其目录结构与传统的 vue 项目却并不彻底一致,一个典型的页面包含如下三个文件:vue
index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中
其中,每一个页面的 main.js 文件基本都是一致的,可经过 mpvue-entry 来自动生成(weex 也有相似的处理),而 main.json 我我的认为直接在 vue 文件中配置更为合适,因而开发了 mpvue-config-loader 来加以实现webpack
本文将介绍如何在 mpvue 官方模板的基础上,经过配置 mpvue-config-loader 来实如今 vue 文件内书写小程序的页面配置git
1.初始化项目github
vue init mpvue/mpvue-quickstart my-project
2.安装依赖web
npm i mpvue-config-loader -D
ornpm
yarn add mpvue-config-loader -D
3.修改打包配置json
module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'mpvue-loader', options: vueLoaderConfig }, + { + test: /\.vue$/, + loader: 'mpvue-config-loader', + exclude: [resolve('src/components')], + options: { + entry: './main.js' + } + } ... ] } ... plugins: [ new MpvuePlugin(), - new CopyWebpackPlugin([{ - from: '**/*.json', - to: '' - }], { - context: 'src/' - }), ... ] }
4.修改页面配置小程序
<script> export default { + config: { + pages: [ + 'pages/index/main', + 'pages/logs/main', + 'pages/counter/main' + ], + window: { + backgroundTextStyle: 'light', + navigationBarBackgroundColor: '#fff', + navigationBarTitleText: 'WeChat', + navigationBarTextStyle: 'black' + } + }, created () { ... } }
import { formatTime } from '@/utils/index' import card from '@/components/card' export default { + config: { + navigationBarTitleText: '查看启动日志' + }, ... }
5.启动运行bash
npm run dev
orweex
yarn dev
globalConfig
属性,其会与页面配置进行合并,可实现全局引用原生组件该模块的实现方式有如下两种可选,但因为前者在编辑器中暂没法高亮,因此采用了第二种方式
<config></config>
<script></script>
标签导出对象的 config
属性