mpvue 单文件页面配置详解


Posted in Javascript onDecember 02, 2018

前言

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 规范

<script>
export default {
+ config: {
+ pages: [
+  'pages/index/main',
+  'pages/logs/main',
+  'pages/counter/main'
+ ],
+ window: {
+  backgroundTextStyle: 'light',
+  navigationBarBackgroundColor: '#fff',
+  navigationBarTitleText: 'WeChat',
+  navigationBarTextStyle: 'black'
+ }
+ },
 created () {
 ...
 }
}

src/pages/logs/index.vue - 同上

import { formatTime } from '@/utils/index'
import card from '@/components/card'

export default {
+ config: {
+ navigationBarTitleText: '查看启动日志'
+ },
 ...
}
  • src/app.json - 删除
  • src/pages/logs/main.json - 删除

启动运行

npm run dev

or

yarn dev

其他

使用 mpvue-entry 的项目暂不建议使用该模块,后期会直接集成作为可选模式之一

该模块的实现方式有以下两种可选,但由于前者在编辑器中暂无法高亮,所以采用了第二种方式

  • 自定义标签 <config></config>
  • <script></script> 标签导出对象的 config 属性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的parse()方法使用简介
Jun 12 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
浅析Jquery操作select
Dec 13 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
详解小程序循环require之坑
Mar 08 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 #Javascript
GOJS+VUE实现流程图效果
Dec 01 #Javascript
JavaScript实现简单轮播图效果
Dec 01 #Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
Node.js 路由的实现方法
2019/06/05 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
构建Python包的五个简单准则简介
2015/06/15 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python实现银行管理系统
2019/10/25 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
市场营销管理毕业生自荐信
2014/03/03 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
合作经营协议书范本
2014/09/16 职场文书
村干部任职承诺书
2015/01/21 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python
MySQL深分页问题解决思路
2022/12/24 MySQL