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脚本性能的优化方法
Feb 02 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
PHP守护进程实例
Mar 06 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
分享PHP入门的学习方法
2007/01/02 PHP
smarty的保留变量问题
2008/10/23 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP源码之explode使用说明
2011/08/05 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Python3基于sax解析xml操作示例
2018/05/22 Python
Django如何自定义分页
2018/09/25 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
二年级体育教学反思
2014/01/15 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js