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

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

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 () {
      ...
    }
  }

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: '查看启动日志'
+ },
  ...
}

Other

app.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 Label

<script></script> Das Konfigurationsattribut des Tag-Exportobjekts

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!