Introduction to the steps of mpvue single file page configuration

不言
Release: 2018-12-14 10:55:54
forward
3633 people have browsed it

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 文件中
Copy after login

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
Copy after login

2.Install dependencies

npm i mpvue-config-loader -D
Copy after login

or

yarn add mpvue-config-loader -D
Copy after login

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/'
-   }),
    ...
  ]
}
Copy after login

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 () {
    ...
  }
}
Copy after login
  • src/pages/logs/index .vue - Same as above

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

export default {
+ config: {
+   navigationBarTitleText: '查看启动日志'
+ },
  ...
}
Copy after login
  • src/app.json - Delete

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

5. Start running

npm run dev
Copy after login

or

yarn dev
Copy after login

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!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!