作者:女女的家_747 | 2022-11-13 18:22
这篇文章主要介绍了mpvue单文件页面配置详解,本文将介绍如何在mpvue官方模板的基础上,通过配置mpvue-config-loader来实现在vue文件内书写小程序的页面配置,感兴趣的小伙伴们可以参考一下
前言
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 文件内书写小程序的页面配置
步骤
初始化项目
vue init mpvue/mpvue-quickstart my-project
安装依赖
npm i mpvue-config-loader -D
or
yarn add mpvue-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: [
new MpvuePlugin(),
- new CopyWebpackPlugin([{
- from: '**/*.json',
- to: ''
- }], {
- context: 'src/'
- }),
...
]
}
修改页面配置
src/App.vue - 复制 app.json 中的内容,并修改格式以符合 eslint 规范
标签导出对象的 config 属性
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
如何解决《大纲文字AndroidStudio》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《使用数组作为索引增加numpy数组元素》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《线程安全事件-这是一种"干净"的方式吗?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《DDD-使用Doctrine2的有界上下文之间的关联映射》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《FirefoxDriver始终在"firstrun"页面上启动,打破所有测试脚本》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何使用SparkDataFrames查询JSON数据列?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《在断开事件中重新连接套接字》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《更新Liferay用户锁定》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《Linux内核-"放置"inode是什么意思?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《尝试从命令行获取星号*作为main的输入》经验,为你挑选了2个好方法。 ...
[详细]
-
如何解决《如何在Swift中调用AWSLambda函数》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何在VisualStudioCode中调试从Grunt运行的Jasmine测试?》经验,为你挑选了0个好方法。 ...
[详细]
-
如何解决《Symfony3,DI-为参数添加服务》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《将所有模型添加到管理站点django1.9》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《用于ServerBootstrap的AbstractBootstrap#handler与ServerBootstrap#childHandler?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《按组查找运行最大值》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《在同一容器中对齐具有不同高度的弹性项目》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《删除元素的函数(如果存在但添加元素)则不会》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何将字符串转换为Bash中的所有空格?》经验,为你挑选了1个好方法。 ...
[详细]
-
如何解决《在一行和几行上写东西之间的区别》经验,为你挑选了1个好方法。 ...
[详细]