Comment développer plusieurs pages dans vue2.0

Cette fois je vais vous montrer comment développer plusieurs pages avec vue2.0 Quelles sont les précautions pour développer plusieurs pages avec vue2.0 Voici des cas pratiques, jetons un oeil. .

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 faire de petites pages multiples. projet plus vaste, vous ne pouvez toujours pas le faire sans 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 ensuite npm. Cependant, généralement les nouvelles versions de node auront npm, donc vous ne le faites pas. Je n’ai pas besoin de le faire. Les instructions sont saisies sur la ligne de commande. La première étape consiste à générer un projet vue à l'aide de 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 puis générez un projet vue. Cependant, ce projet vue n'a pas de dépendances associées. À ce stade, vous devez entrer dans le dossier et saisir la commande : <.>

npm install

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

npm run dev

. Une interface s'ouvrira automatiquement. Si une erreur est signalée et que la page Web ne peut pas être ouverte, il n'y a qu'une seule raison, c'est-à-dire que le port est occupé. À ce stade, vous devez modifier le port dans le fichier /config/index. js répertoire.

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 one.html et two.html, ainsi que leurs fichiers vue et js correspondants. fichiers, le répertoire des 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, puis y configurons et ajoutons plusieurs entrées :

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

Notez que le

nom de la variable dans la partie violette doit être récupéré car il sera utilisé plus tard pour éviter tout oubli.

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.

Configurez ensuite la version d'exécution, qui est l'environnement de compilation. Ouvrez d'abord le fichier configindex.js et ajoutez-le à la build :

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

Ouvrez ensuite le fichier /build/webpack.prod/conf.js, recherchez HTMLWebpackPlugin dans les plugins et ajoutez le code suivant :

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 à la construction dans configindex.js. Chaque page doit être configurée avec un seul morceau, 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: 'one',
 data () {
  return {
   msg: 'I am one'
  }
 }
}
</script>

La méthode d'écriture à deux y est similaire, donc je ne l'écrirai pas,

Ensuite, écrivez ceci dans App.vue :

<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, cliquez sur le lien ci-dessus pour accéder à one.html, cliquez sur deux pour accéder à two.html . De cette façon, vous avez terminé.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Complétion de l'adresse e-mail dans la zone de texte de l'invite JS 

Comment obtenir json du serveur à l'aide de $.ajax( ) méthode Données

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!