搜索
首页微信小程序小程序开发mpvue单文件页面配置的步骤介绍

mpvue单文件页面配置的步骤介绍

Dec 14, 2018 am 10:55 AM
mpvuewebpack前端小程序

本篇文章给大家带来的内容是关于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 文件内书写小程序的页面配置

步骤

1.初始化项目

vue init mpvue/mpvue-quickstart my-project

2.安装依赖

npm i mpvue-config-loader -D

or

yarn add mpvue-config-loader -D

3.修改打包配置

  • 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/'
-   }),
    ...
  ]
}

4.修改页面配置

  • 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 - 删除

5.启动运行

npm run dev

or

yarn dev

其他

app.vue 文件中可设置 globalConfig 属性,其会与页面配置进行合并,可实现全局引用原生组件

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

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

自定义标签

<script></script> 标签导出对象的 config 属性

以上是mpvue单文件页面配置的步骤介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:segmentfault。如有侵权,请联系admin@php.cn删除

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中