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属性以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。