Introduction to the steps of mpvue single file page configuration

This article brings you an introduction to the steps of mpvue single file page configuration. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The emergence of mpvue brings the development experience of vue to the small program platform, but its directory structure is not completely consistent with the traditional vue project. A typical page contains the following three files:

index.vue // 页面文件
main.js // 打包入口，完成 vue 的实例化
main.json // 小程序特有的页面配置，早期写在 main.js 文件中

Among them, the main.js file of each page is basically the same and can be automatically generated through mpvue-entry (weex also has similar processing), and I personally think that main.json is directly in the vue file The configuration is more suitable, so mpvue-config-loader was developed to implement it

This article will introduce how to write small files in vue files by configuring mpvue-config-loader based on the official mpvue template. Program page configuration

Steps

1.Initialize the project

vue init mpvue/mpvue-quickstart my-project

2.Install dependencies

npm i mpvue-config-loader -D

or

yarn add mpvue-config-loader -D

3.Modify Packaging configuration

• 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. Modify page configuration

• src/App.vue - Copy the content in app.json and modify the format to conform to 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/index .vue - Same as above

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

export default {
+ config: {
+   navigationBarTitleText: '查看启动日志'
+ },
  ...
}

• src/app.json - Delete

• src/pages/logs/main. json - Delete

5. Start running

npm run dev

or

yarn dev

other

app.vue The globalConfig attribute can be set in the file, which will be merged with the page configuration to achieve global reference to native components.

Projects using mpvue-entry are not recommended to use this module for the time being. 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 label

<script></script> The config attribute of the label export object

The above is the detailed content of Introduction to the steps of mpvue single file page configuration. For more information, please follow other related articles on the PHP Chinese website!