mpvue 单文件页面配置详解

前言

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 属性

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 Vue

  • vue配置多页面的实现方法

    vue配置多页面的实现方法

    1.安装环境 ①安装node.js 并添加入环境变量PATH ②安装淘宝NPM镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org ③安装webpack npm install webpack -g ④安装vue-cli脚手架 npm install -g vue-cli ⑤创建项目模板 vue init wepack vue-multipage-demo ⑥cmd进入到要放项目的文件夹 ⑦安装 cnpm inst

  • vue 2.8.2版本配置刚进入时候的默认页面方法

    vue --version查看版本 是 2.8.2: vue 2.8.2版本配置刚进入时候的默认页面比如这里面的goods页面: 1.在路由文件下里面的index.js文件 添加 { path: '/', redirect: '/goods/goods' }, // 默认就跳转此页面 2.也可以在app.vue里面配置 this.$router.push('/goods/goods'); // 页面加载时跳转 详情看下面 export default { name: 'app', compone

  • vue-cli创建的项目,配置多页面的实现方法

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • vue 配置多页面应用的示例代码

    前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求,因此需要配置多页面应用. 1. 新建 vue 项目 vue init webpack vue_multiple_test cd vue_multiple_test npm install 2. 安装 glob npm i glob --save-dev glob 模块用于查找符合要求的文件 3. 目

  • WebPack配置vue多页面的技巧

    WebPack虐我千百遍,我带她如初恋.一个项目前台页面写差不多了,webpack几乎零配置,也算work起来了.现在需要编写后台管理界面,另起一个单独的项目,那是不存在的.于是网上了搜了大把大把的文章,很多都是修改了项目的结构,讨厌,vue-cli搞的那一套,干嘛要修改来修改去的.像我这种前端小萌新,webpack的配置改着就把前台部分run不起来了... 于是就有了这个笔记: 先看看项目的结构: ├── build ├── config ├── src │   ├── api │   ├──

  • 详解vue-cli + webpack 多页面实例配置优化方法

    本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

  • Vue单页及多页应用全局配置404页面实践记录

    前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口.下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的. 总体思路 无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由,渲染相应的404页面.同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面.下面来说一下针对单页和多页

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

随机推荐