mpvue 单文件页面配置详解
前言
mpvue的出现把vue的开发体验带到了小程序这个平台中,但其目录结构与传统的vue项目却并不完全一致,一个典型的页面包含以下三个文件:
index.vue//页面文件 main.js//打包入口,完成vue的实例化 main.json//小程序特有的页面配置,早期写在main.js文件中
其中,每个页面的main.js文件基本都是一致的,可通过mpvue-entry来自动生成(weex也有类似的处理),而main.json我个人认为直接在vue文件中配置更为合适,于是开发了mpvue-config-loader来加以实现
本文将介绍如何在mpvue官方模板的基础上,通过配置mpvue-config-loader来实现在vue文件内书写小程序的页面配置
步骤
初始化项目
vueinitmpvue/mpvue-quickstartmy-project
安装依赖
npmimpvue-config-loader-D
or
yarnaddmpvue-config-loader-D
修改打包配置
build/webpack.base.conf.js
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:[ newMpvuePlugin(), -newCopyWebpackPlugin([{ -from:'**/*.json', -to:'' -}],{ -context:'src/' -}), ... ] }
修改页面配置
src/App.vue-复制app.json中的内容,并修改格式以符合eslint规范
标签导出对象的config属性以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。