Detailed explanation of mpvue single file page configuration

Preface

The emergence of mpvue brings the development experience of vue to the mini program platform, but its directory structure is not exactly the same as that of traditional vue projects. A typical page contains the following three files:

 // Page file // Pack the entry to complete the instantiation of vue // Page configuration unique to applets，Written early in  In the file

Among them, the files on each page are basically the same and can be passedmpvue-entry To generate automatically (weex also has similar processing), and I personally think it is more appropriate to configure it directly in the vue file, so I developed itmpvue-config-loader Come to realize it

This article will introduce how to implement the page configuration of a small program in a vue file by configuring mpvue-config-loader based on the official mpvue template.

step

Initialize the project

vue init mpvue/mpvue-quickstart my-project

Installation dependencies

npm i mpvue-config-loader -D

or

yarn add mpvue-config-loader -D

Modify the packaging configuration

build/

 = {
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'mpvue-loader',
  options: vueLoaderConfig
  },
+  {
+  test: /\.vue$/,
+  loader: 'mpvue-config-loader',
+  exclude: [resolve('src/components')],
+  options: {
+   entry: './'
+  }
+  }
 ...
 ]
 }
 ...
 plugins: [
 new MpvuePlugin(),
- new CopyWebpackPlugin([{
-  from: '**/*.json',
-  to: ''
- }], {
-  context: 'src/'
- }),
 ...
 ]
}

Modify page configuration

src/ - Copy the content in , and modify the format to comply with the eslint specification

<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/ - Same as above

import { formatTime } from '@/utils/index'
import card from '@/components/card'

export default {
+ config: {
+ navigationBarTitleText: 'View startup log'
+ },
 ...
}

• src/ - delete
• src/pages/logs/ - Delete

Get up and run

npm run dev

or

yarn dev

other

usempvue-entryThis module is not recommended for projects. It will be directly integrated as one of the optional modes later.

There are two options for implementing this module, but since the former cannot be highlighted in the editor, the second method is adopted

• Custom tags <config></config>
• <script></script> config attribute of tag export object

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.