Home > Article > WeChat Applet > 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
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!