Maison >Applet WeChat >Développement de mini-programmes >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
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