作者:迦迦奥特曼_897 | 来源:互联网 | 2023-05-19 06:26
前言mpvue的出现把vue的开发体验带到了小程序这个平台中,但其目录结构与传统的vue项目却并不完全一致,一个典型的页面包含以下三个文件:index.vue页面文件main.js打包入口,完成vue的实例化ma
前言
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 属性
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
本文涉及源码版本为2.6.9准备工作down一份Vue源码,从package.json入手,找我们需要的代码1、package.json中的scripts,build:nodesc ...
[详细]
蜡笔小新 2023-10-16 17:16:29
-
媒介本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时候为2017年6月12日,许多内容早已逾期或是许多近期优异组件未被收录,所以小肆 ...
[详细]
蜡笔小新 2023-10-17 14:33:46
-
-
本文介绍了如何使用PHP向系统日历中添加事件的方法,通过使用PHP技术可以实现自动添加事件的功能,从而实现全局通知系统和迅速记录工具的自动化。同时还提到了系统exchange自带的日历具有同步感的特点,以及使用web技术实现自动添加事件的优势。 ...
[详细]
蜡笔小新 2023-12-14 21:02:28
-
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
-
本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ...
[详细]
蜡笔小新 2023-12-14 13:56:20
-
本文讨论了如何使用Web.Config进行自定义配置节的配置转换。作者提到,他将msbuild设置为详细模式,但转换却忽略了带有替换转换的自定义部分的存在。 ...
[详细]
蜡笔小新 2023-12-11 17:54:55
-
在vue项目开发中经常引用JS、CSS、IMG文件。当项目较大时文件层级很多,导致路径很长,我们可以通过在bulidwebpack.base.conf.js设置简便的引用路径一、 ...
[详细]
蜡笔小新 2023-10-17 22:56:05
-
篇首语:本文由编程笔记#小编为大家整理,主要介绍了Docker安装Rabbitmq(配合宝塔)相关的知识,希望对你有一定的参考价值。一、事前准备 ...
[详细]
蜡笔小新 2023-10-16 21:28:44
-
npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ...
[详细]
蜡笔小新 2023-10-16 19:57:15
-
IDApro反编译exe时生成的C文件中#include的defs.h文件在IDA目录下plugins文件夹内*Thisfilecontainsdefinition ...
[详细]
蜡笔小新 2023-10-16 15:32:37
-
vux2模板fork自webpack模板,基本和官方同步。1、默认为webpack2模板npminstallvue-cli-g如果还没安装vueinitairyla ...
[详细]
蜡笔小新 2023-10-16 13:15:22
-
蜡笔小新 2023-10-16 11:59:57
-
篇首语:本文由编程笔记#小编为大家整理,主要介绍了淘淘商城---8.6相关的知识,希望对你有一定的参考价值。继续八月五号写的,今天晚上花点时间开发这个项目& ...
[详细]
蜡笔小新 2023-10-15 18:32:29
-
FILETYPE*filetype.txt*ForVimversion6.4.文件类型*filetype**file-type*1.文件类型|filetypes|2.文件类型插 ...
[详细]
蜡笔小新 2023-10-15 16:37:42
-
目录1Hadoop1.x和Hadoop2.x架构区别2Yarn概述3Yarn基本架构4Yarn工作机制5作业提交全过程6资源调度器7任务的推测执行1Hadoop1.x和Hadoo ...
[详细]
蜡笔小新 2023-10-15 12:16:30
-