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 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php 无限级缓存的类的扩展
2009/03/16 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL