Introduction aux étapes de configuration d'une page de fichier unique mpvue-Développement de mini-programmes-php.cn

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 文件中

Copier après la connexion

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

Copier après la connexion

2. Installer les dépendances

npm i mpvue-config-loader -D

Copier après la connexion

yarn add mpvue-config-loader -D

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

src/pages/logs/index.vue - Identique à ci-dessus

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

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

Copier après la connexion

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

5. Commencez à exécuter

npm run dev

Copier après la connexion

yarn dev

Copier après la connexion

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

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours