Heim > Artikel > WeChat-Applet > Einführung in die Schritte der mpvue-Einzeldateiseitenkonfiguration
Dieser Artikel bietet Ihnen eine Einführung in die Schritte der mpvue-Einzeldatei-Seitenkonfiguration. Ich hoffe, dass er Ihnen als Referenz dienen wird.
Das Aufkommen von mpvue bringt die Vue-Entwicklungserfahrung auf die Mini-Programmplattform, aber ihre Verzeichnisstruktur stimmt nicht vollständig mit dem traditionellen Vue-Projekt überein. Eine typische Seite enthält die folgenden drei Dateien:
index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中
Unter diesen ist die main.js-Datei jeder Seite im Grunde dieselbe und kann automatisch über mpvue-entry generiert werden (weex hat auch eine ähnliche Verarbeitung), und ich persönlich denke, dass sich main.json direkt in der vue-Datei befindet Die Konfiguration ist besser geeignet, daher wurde mpvue-config-loader entwickelt, um sie zu implementieren
In diesem Artikel wird erläutert, wie Sie kleine Dateien in Vue-Dateien schreiben, indem Sie mpvue-config-loader basierend auf der offiziellen mpvue-Vorlage konfigurieren Seitenkonfiguration
1. Initialisieren Sie das Projekt
vue init mpvue/mpvue-quickstart my-project
2. Installieren Sie Abhängigkeiten
npm i mpvue-config-loader -D
3 Konfiguration
yarn add mpvue-config-loader -D
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/' - }), ... ] }
<script> export default { + config: { + pages: [ + 'pages/index/main', + 'pages/logs/main', + 'pages/counter/main' + ], + window: { + backgroundTextStyle: 'light', + navigationBarBackgroundColor: '#fff', + navigationBarTitleText: 'WeChat', + navigationBarTextStyle: 'black' + } + }, created () { ... } }
import { formatTime } from '@/utils/index' import card from '@/components/card' export default { + config: { + navigationBarTitleText: '查看启动日志' + }, ... }Otherapp.vue Das Attribut „globalConfig“ kann in der Datei festgelegt werden, die mit der Seitenkonfiguration zusammengeführt wird und einen globalen Verweis auf native Komponenten ermöglicht.
Projekten, die mpvue-entry verwenden, wird die Verwendung dieses Moduls derzeit nicht empfohlen Es wird in Zukunft direkt als einer der optionalen Modi integriert.
Es gibt zwei Möglichkeiten, dieses Modul zu implementieren, aber da ersteres nicht im Editor hervorgehoben werden kann, wird die zweite Methode übernommen Benutzerdefiniertes LabelDas obige ist der detaillierte Inhalt vonEinführung in die Schritte der mpvue-Einzeldateiseitenkonfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!