- Construction d'un projet de spa
- Terminé en fonction du planning du projet de spa
- Routage imbriqué complet basé sur le projet de spa
1. Construction d'un projet de spa
vue-cli est un échafaudage pour vue.js, utilisé pour générer automatiquement des modèles de projet pour vue.js+webpack. La commande de création est la suivante :
vue init webpack xxx
Remarque 1 : xxx crée un nom pour le projet pour vous-même.
Note 2 : vue, vue doit être installé en premier. -cli, webpack, node et autres environnements nécessaires
Installez vue-cli
npm install -g vue-cli
npm install webpack -g
Remarque 1 : Une fois l'installation réussie, le fichier suivant apparaîtra
D:\initPath
node-v10.15.3-win-x64
node_global
vue
vue.cmd
vue- init
vue- init.cmd
vue-list
vue-list.cmd
Remarque 2 : Une fois l'installation terminée, ouvrez la fenêtre de commande et entrez vue -V (notez le "V" majuscule ici). Si le numéro de version correspondant apparaît, le l'installation est réussie.
Utilisez l'échafaudage vue -
.cli (version 2 vue init webpack spa#Cette commande est utilisée pour créer un projet SPA. Elle générera un dossier nommé "spa" dans le répertoire courant.
#spa1 est le nom du projet. Le nom du projet ne peut pas utiliser de lettres chinoises ou majuscules, puis "Question et réponse" Mode (voir Note 2)
Note 1 : La fenêtre de ligne de commande cmd affiche des caractères chinois tronqués, principalement parce que l'encodage des caractères de la fenêtre de ligne de commande cmd ne correspond pas, ce qui conduit à la
modification de l'encodage des caractères de la fenêtre cmd. en UTF-8. Exécuter en ligne de commande : chcp 65001
pour revenir au chinois : Les deux commandes chcp 936
ne prennent effet que dans la fenêtre courante. L'encodage précédent sera restauré après redémarrage.Note 2 : Mode « Une question et une réponse »
1.Nom du projet : nom du projet, la valeur par défaut est le nom spa1 lors de la saisie, appuyez simplement sur Entrée
2.Description du projet : Description du projet, appuyez simplement sur Entrée
3.Auteur : Auteur, remplissez-le avec désinvolture ou appuyez directement sur Entrée
4.Vue build : question à choix multiples, choisissez généralement la première
4.1.Runtime + Compiler : recommandé pour la plupart des utilisateurs //Runtime + Compiler, officiellement recommandé, choisissez-le
4.2.Runtime uniquement : environ 6 Ko plus légers min+gzip, mais les modèles (ou tout HTML spécifique à Vue) ne sont autorisés QUE dans les fichiers .vue
- les fonctions de rendu sont requises ailleurs//Uniquement lors de l'exécution, s'il y a déjà une recommandation, choisissez la première
5.Installez vue-router : Que vous ayez besoin de vue-router, vous choisissez de l'utiliser, afin que le projet généré ait les fichiers de configuration de routage pertinents
6.Utilisez ESLint pour pelucher votre code : utilisez ou non ESLint pour limiter les erreurs et le style de votre code. N Ce n'est pas nécessaire pour les novices, mais il est généralement utilisé dans des projets réels, afin que plusieurs développeurs puissent obtenir une syntaxe cohérente.
7.Configurer les tests unitaires : s'il faut installer des tests unitaires N
8.Configurer les tests e2e avec Nightwatch ?：S'il faut installer les tests e2e N
9. Devrions-nous exécuter « npm install » pour vous après la création du projet ? (recommandé) (Utilisez les touches fléchées)
> Oui, utilisez NPM
Oui, utilisez du fil
Non, je m'en occupe moi-même //Question à choix multiples : choisissez le premier élément "Oui, utiliser NPM" si vous souhaitez utiliser npm install pour installer les dépendances
Sélectionnez tout et appuyez sur Entrée pour générer le projet. Le contenu suivant apparaît pour indiquer que la création du projet est terminée.
# Initialisation du projet terminée !
## Étape 2 : Après avoir exécuté la commande ci-dessus, nous devons modifier le chemin actuel vers le dossier SPA, puis installer les modules requis
## Cette étape peut être comprise comme : Une fois le projet Web maven créé avec succès, modifiez le fichier pom pour ajouter des dépendances.
cd spa1 #Changer le chemin d'accès au dossier spa1
npm install #Installer tous les modules npm requis par le projet
## Étape 2 : Après avoir exécuté la commande ci-dessus, nous devons modifier le chemin actuel vers le dossier SPA, puis installer les modules requis
## Cette étape peut être comprise comme : Une fois le projet Web maven créé avec succès, modifiez le fichier pom pour ajouter des dépendances.
cd spa1 #Changer le chemin d'accès au dossier spa1
npm install #Installer tous les modules npm requis par le projet
## Étape 3 : Démarrer et accéder au projet
## Cette étape peut être comprise comme : démarrer Tomcat et accéder au projet via le navigateur
cd spa1
npm exécuter le développement
Remarque 1 : Une fois le projet démarré avec succès, ouvrez le navigateur et entrez « http://localhost:8080 »
Remarque 2 : Pour les projets construits par vue-cli, après le démarrage de npm run dev dans la console, l'adresse de débogage par défaut est le port 8080.
2. Routage complet basé sur le projet de spa
//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
//Home.vue
<template>
<div class="home">这是网站首页，宣传内容放这里</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
//About.vue
<template>
<div>这是站长介绍网站的发展史</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
//index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/About',
name: 'About',
component: About
}
]
})
//App.vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<router-link to="/Home">首页</router-link>
<router-link to="/About">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3. Routage imbriqué complet basé sur le projet de spa
Le routage imbriqué est basé sur le routage du projet de spa. Le code suivant a été ajouté et modifié. Les codes répétés ne seront pas inclus.
//components下的AboutMe
<template>
<div>
这是站长介绍
</div>
</template>
<script>
export default {
name: 'AboutMe',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
//components下的AboutWebsite
<template>
<div>
网站的发展史
</div>
</template>
<script>
export default {
name: 'AboutWebsite',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
//components下的About
<template>
<div>
<router-link to="/AboutMe">关于站长</router-link>
<router-link to="/AboutWebsite">关于本站</router-link>
<!-- 这是站长介绍网站的发展史 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
//router下的index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebsite from '@/components/AboutWebsite'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/About',
name: 'About',
component: About,
children:[
{
path: '/AboutMe',
name: 'AboutMe',
component: AboutMe
},
{
path: '/AboutWebsite',
name: 'AboutWebsite',
component: AboutWebsite
}
]
}
]
})
