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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
微信小程序用户授权最佳实践指南
May 08 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
php 动态添加记录
2009/03/10 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
安全生产投入制度
2014/01/29 职场文书
社区庆八一活动方案
2014/02/02 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
运动员口号
2014/06/09 职场文书
学校食堂标语
2014/10/06 职场文书
学校施工安全责任书
2015/01/29 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
Python+Appium实现自动抢微信红包
2021/05/21 Python