Introduction aux étapes de configuration d'une page de fichier unique mpvue

Cet article vous présente les étapes de configuration d'une page de fichier unique mpvue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

L'émergence de mpvue apporte l'expérience de développement Vue à la plate-forme de mini-programme, mais sa structure de répertoires n'est pas complètement cohérente avec le projet Vue traditionnel. Une page typique contient les trois fichiers suivants :

index.vue // 页面文件
main.js // 打包入口，完成 vue 的实例化
main.json // 小程序特有的页面配置，早期写在 main.js 文件中

Parmi eux, le fichier main.js de chaque page est fondamentalement le même et peut être généré automatiquement via mpvue-entry (weex a également un traitement similaire), et je pense personnellement que main.json est directement dans The la configuration dans le fichier vue est plus appropriée, donc mpvue-config-loader a été développé pour l'implémenter

Cet article présentera comment configurer mpvue-config-loader pour l'implémenter dans le fichier vue basé sur le mpvue officiel modèle. Configuration de la page pour l'écriture de mini programmes

Étapes

1. Initialiser le projet

vue init mpvue/mpvue-quickstart my-project

2. Installer les dépendances

npm i mpvue-config-loader -D

ou

yarn add mpvue-config-loader -D

3. Modifier la configuration du packaging

• 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. Modifiez la page Configuration

• src/App.vue - Copiez le contenu dans app.json et modifiez le format pour se conformer à la spécification eslint

<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 - Identique à ci-dessus

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

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

• src/app. json - Supprimer

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

5. Commencez à exécuter

npm run dev

ou

yarn dev

Autres

L'attribut globalConfig peut être défini dans le fichier app.vue, qui sera fusionné avec la configuration de la page pour obtenir une référence globale à composants natifs

Utiliser mpvue-entry Le projet ne recommande pas l'utilisation de ce module pour le moment. Il sera directement intégré comme l'un des modes optionnels à l'avenir

Il y en a deux. options d'implémentation de ce module, mais comme le premier ne peut pas être mis en évidence dans l'éditeur, il est adopté La deuxième façon

Balise personnalisée