Comment implémenter le développement multipage dans vue2.0

Cet article présente principalement des exemples de développement multipage dans vue2.0. Maintenant, je le partage avec vous et le donne comme référence.

Lorsque nous utilisons habituellement vue pour développer, nous avons toujours l'impression que vue est née spécifiquement pour les applications monopage, mais ce n'est pas le cas. Parce que Vue s'appuie fortement sur Webpack lors du développement technique, et Webpack intègre toutes les ressources dans une seule page. Mais vue peut non seulement créer une seule page, elle peut également créer plusieurs pages. Si vous souhaitez créer plusieurs pages, vous devez vous y fier, c'est-à-dire que le webpack doit être reconfiguré. Cet article parlera en détail de la configuration de webpack.

Il existe deux façons de développer vue. La première consiste à introduire directement le fichier vue.js dans la balise script, je pense personnellement qu'il sera plus confortable de créer de petits multi-. pages Une fois que vous en avez créé un plus grand, le projet est toujours indissociable du webpack. Une autre méthode est donc le développement technique basé sur webpack et vue-cli. Les étapes sont détaillées ci-dessous.
Permettez-moi d'abord de préciser que si vous utilisez vue pour le développement technique, vous devez d'abord avoir node.js, puis télécharger npm. Cependant, généralement les nouvelles versions de node auront npm, vous n'avez donc pas besoin de le faire. Les instructions sont saisies sur la ligne de commande. Tout d'abord, la première étape consiste à générer un projet vue. Utilisez la commande :

vue init webpack test

Le nom de fichier déclaré par le blogueur lui-même est test. Après le téléchargement, entrez jusqu'au bout. Le projet vue est généré, mais ce projet vue Il n'y a pas encore de dépendances associées. Pour le moment, vous devez entrer dans le dossier et saisir la commande :

npm install

Si la vitesse du réseau n'est pas bonne, utilisez cnpm. installez, l’effet sera le même. Au bout de quelques minutes, l'intégralité de la dépendance a été téléchargée. Entrez ensuite la commande :

npm run dev

et une interface s'ouvrira automatiquement. Si une erreur est signalée et que la page web ne peut pas être ouverte, il n'y en a qu'une. raison, c'est-à-dire que le port est occupé à ce moment-là. Il vous suffit de changer le port dans le répertoire /config/index.js.

Lorsqu'un projet vue a terminé toutes les configurations, l'étape suivante est notre objectif. Tout d'abord, nous créons quelques nouveaux fichiers html. En tant que blogueur, j'ai créé un nouveau fichier one.html et two.html, et le. fichiers vue et fichiers js correspondants, le répertoire de fichiers est le suivant :

Après l'avoir terminé, nous entrons dans le répertoire buildwebpack.base.conf.js, trouvons l'entrée dans le domaine module.exports et configurons l'ajout là Entrées multiples :

entry: {
 app: './src/main.js',
 one: './src/js/one.js',
 two: './src/js/two.js'
},

Notez que les noms de variables dans la partie violette doivent être bien nommés, car ils serviront plus tard pour éviter les oublis.

L'étape suivante consiste à modifier l'environnement de développement, exécutez dev, ouvrez le fichier buildwebpack.dev.conf.js et recherchez les plugins dans module.exports. Ce qui suit est écrit comme suit :

plugins: [
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  chunks: ['app']
 }),
 new HtmlWebpackPlugin({
  filename: 'one.html',
  template: 'one.html',
  inject: true,
  chunks: ['one']
 }),
 new HtmlWebpackPlugin({
  filename: 'two.html',
  template: 'two.html',
  inject: true,
  chunks: ['two']
 }),
 new FriendlyErrorsPlugin()
]

L'application en morceaux fait référence au nom de variable correspondant dans l'entrée de webpack.base.conf.js. La fonction des morceaux est que chaque entrée correspondra à une entrée à chaque fois qu'elle est compilée et exécutée. Si elle n'est pas écrite, les ressources de toutes les pages seront introduites.

Après cela, configurez le build d'exécution, qui est l'environnement de compilation. Ouvrez d'abord le fichier configindex.js et ajoutez ceci au build :

index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

Ensuite, ouvrez le fichier /build/webpack.prod/conf.js, recherchez le HTMLWebpackPlugin dans les plugins, puis ajoutez ce qui suit code :

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  // more options:
  // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.one,
 template: 'one.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'one']
}),
 new HtmlWebpackPlugin({
   filename: config.build.two,
   template: 'two.html',
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
   },
   chunksSortMode: 'dependency',
   chunks: ['manifest', 'vendor', 'two']
 }),

Le nom de fichier fait référence au build dans configindex.js Chaque page doit être configurée avec un chunk, sinon les ressources de toutes les pages seront chargées.

Ensuite, le fichier one.js peut être écrit comme ceci :

import Vue from 'vue'
import one from './one.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#one',
 render: h => h(one)
})
one.vue写法如下：
<template>
 <p id="one">
  {{msg}}
 </p>
</template>

<script>
export default {
 name: &#39;one&#39;,
 data () {
  return {
   msg: &#39;I am one&#39;
  }
 }
}
</script>

Deux est écrit de la même manière, donc je ne l'écrirai pas

. Ensuite, dans App.vue, passez-le comme ceci Écrivez :

<template>
 <p id="app">
  <a href="one.html" rel="external nofollow" >one</a><br>
  <a href="two.html" rel="external nofollow" >two</a><br>
  {{msg}}
 </p>
</template>

De cette façon, lorsque vous ouvrez la page, cliquer sur le lien ci-dessus passera à one.html, et cliquer sur deux passera à deux .html. De cette façon, vous avez terminé.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment compiler, empaqueter et afficher des fichiers d'index dans vue

Comment utiliser le modèle Jade dans vue

Passer le modèle au composant dans Angular

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!