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

Schritte

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

build/webpack.base.conf.js

• yarn add mpvue-config-loader -D

  Nach dem Login kopieren
4. Seitenkonfiguration ändern

src/App.vue – Kopieren Sie den Inhalt in app.json und ändern Sie das Format so, dass es der eslint-Spezifikation entspricht

• 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/'
  -   }),
      ...
    ]
  }

  Nach dem Login kopieren

src/pages/logs/ index .vue – Wie oben

• <script>
  export default {
  + config: {
  +   pages: [
  +     'pages/index/main',
  +     'pages/logs/main',
  +     'pages/counter/main'
  +   ],
  +   window: {
  +     backgroundTextStyle: 'light',
  +     navigationBarBackgroundColor: '#fff',
  +     navigationBarTitleText: 'WeChat',
  +     navigationBarTextStyle: 'black'
  +   }
  + },
    created () {
      ...
    }
  }

  Nach dem Login kopieren

src/app.json – Löschen Sie
src/pages/logs /main.json – Löschen Sie
5. Starten Sie und führen Sie

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

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

Projekten, die mpvue-entry verwenden, wird die Verwendung dieses Moduls derzeit nicht empfohlen Es wird in Zukunft direkt als einer der optionalen Modi integriert.

Das 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!