- Bau eines Spa-Projekts
- Basierend auf dem Spa-Projektplan abgeschlossen
- Vollständiges verschachteltes Routing basierend auf dem Spa-Projekt
1. Bau eines Spa-Projekts
vue-cli ist ein Gerüst für vue.js, das zum automatischen Generieren von Projektvorlagen für vue.js+webpack verwendet wird. Der Erstellungsbefehl lautet wie folgt:
vue init webpack xxx
Hinweis 1: xxx erstellt einen Namen für das Projekt für sich selbst.
Hinweis 2 : vue, vue muss zuerst installiert werden. -cli, webpack, node und andere notwendige Umgebungen
Installieren Sie vue-cli
npm install -g vue-cli
npm install webpack -g
Hinweis 1: Nach erfolgreicher Installation wird die folgende Datei angezeigt:
D:\initPath
node-v10.15.3-win-x64
node_global
vue
vue.cmd
vue- init
vue- init.cmd
vue-list
vue-list.cmd
Hinweis 2: Öffnen Sie nach Abschluss der Installation das Befehlsfenster und geben Sie vue -V ein (beachten Sie hier das große „V“). Wenn die entsprechende Versionsnummer angezeigt wird, wird die Die Installation ist erfolgreich.
Verwenden Sie das Gerüst vue -
.cli (Version 2) vue init webpack spa ein#Mit diesem Befehl wird ein SPA-Projekt erstellt. Es wird ein Ordner mit dem Namen „spa“ im aktuellen Verzeichnis erstellt.
#spa1 ist der Projektname. Der Projektname darf weder Chinesisch noch Großbuchstaben verwenden, dies gilt jedoch für „Frage und Antwort“. werden auf dem Terminal angezeigt. Modus (siehe Hinweis 2)
Hinweis 1: Das cmd-Befehlszeilenfenster zeigt verstümmelte chinesische Zeichen an, hauptsächlich weil die Zeichenkodierung des cmd-Befehlszeilenfensters nicht übereinstimmt, was dazu führt, dass die
Zeichenkodierung des cmd-Fensters in UTF-8 geändert wird . Führen Sie in der Befehlszeile aus: chcp 65001, um
wieder auf Chinesisch umzuschalten: Die beiden Befehle chcp 936
wirken nur im aktuellen Fenster. Die vorherige Kodierung wird nach dem Neustart wiederhergestellt.Hinweis 2: Modus „Eine Frage und eine Antwort“.
1.Projektname: Projektname. Bei der Eingabe wird standardmäßig der Name spa1 verwendet. Drücken Sie einfach die Eingabetaste
2.Projektbeschreibung: Projektbeschreibung, drücken Sie einfach die Eingabetaste
3.Autor: Autor, füllen Sie es beiläufig aus oder drücken Sie direkt die Eingabetaste
4. Vue-Build: Multiple-Choice-Frage, wählen Sie normalerweise die erste aus
4.1.Runtime + Compiler: Für die meisten Benutzer empfohlen // Runtime + Compiler, offiziell empfohlen, wählen Sie es aus
4.2.Nur zur Laufzeit: ca. 6 KB weniger min+gzip, aber Vorlagen (oder beliebiges Vue-spezifisches HTML) sind NUR in .vue-Dateien zulässig
- Renderfunktionen sind an anderer Stelle erforderlich // Nur zur Laufzeit, wenn bereits eine Empfehlung vorhanden ist, wählen Sie die erste aus
5. Vue-Router installieren: Unabhängig davon, ob Sie einen Vue-Router benötigen, entscheiden Sie sich für die Verwendung, damit das generierte Projekt über relevante Routing-Konfigurationsdateien verfügt
6.Verwenden Sie ESLint, um Ihren Code zu linten: Legt fest, ob ESLint verwendet werden soll, um Fehler und Stil Ihres Codes zu begrenzen. N Dies ist für Anfänger nicht erforderlich, wird jedoch im Allgemeinen in tatsächlichen Projekten verwendet, sodass mehrere Entwickler eine konsistente Syntax erreichen können.
7. Unit-Tests einrichten: Ob Unit-Tests N installiert werden sollen
8. E2e-Tests mit Nightwatch einrichten?: Ob E2e-Tests installiert werden sollen N
9. Sollen wir „npm install“ für Sie ausführen, nachdem das Projekt erstellt wurde? (empfohlen) (Pfeiltasten verwenden)
> Ja, verwenden Sie NPM
Ja, verwenden Sie Garn
Nein, das kümmere ich mich selbst //Multiple-Choice-Frage: Wählen Sie beim ersten Punkt „Ja, NPM verwenden“, ob npm install zum Installieren von Abhängigkeiten verwendet werden soll
Wählen Sie alles aus und drücken Sie die Eingabetaste, um das Projekt zu generieren. Der folgende Inhalt zeigt an, dass die Projekterstellung abgeschlossen ist.
# Projektinitialisierung abgeschlossen!
## Schritt 2: Nachdem wir den obigen Befehl ausgeführt haben, müssen wir den aktuellen Pfad zum SPA-Ordner ändern und dann die erforderlichen Module installieren
## Dieser Schritt kann wie folgt verstanden werden: Nachdem das Maven-Webprojekt erfolgreich erstellt wurde, ändern Sie die POM-Datei, um Abhängigkeiten hinzuzufügen.
cd spa1 #Ändern Sie den Pfad zum Ordner spa1
npm install #Installieren Sie alle für das Projekt erforderlichen npm-Module
## Schritt 2: Nachdem wir den obigen Befehl ausgeführt haben, müssen wir den aktuellen Pfad zum SPA-Ordner ändern und dann die erforderlichen Module installieren
## Dieser Schritt kann wie folgt verstanden werden: Nachdem das Maven-Webprojekt erfolgreich erstellt wurde, ändern Sie die POM-Datei, um Abhängigkeiten hinzuzufügen.
cd spa1 #Ändern Sie den Pfad zum Ordner spa1
npm install #Installieren Sie alle für das Projekt erforderlichen npm-Module
## Schritt 3: Starten Sie das Projekt und greifen Sie darauf zu
## Dieser Schritt kann wie folgt verstanden werden: Starten Sie Tomcat und greifen Sie über den Browser auf das Projekt zu
cd spa1
npm run dev
Hinweis 1: Nachdem das Projekt erfolgreich gestartet wurde, öffnen Sie den Browser und geben Sie „http://localhost:8080“ ein.
Hinweis 2: Bei Projekten, die mit vue-cli erstellt wurden, ist die Standard-Debug-Adresse nach dem Start von npm run dev in der Konsole Port 8080.
2. Komplette Routenplanung basierend auf dem Spa-Projekt
//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. Vervollständigen Sie das verschachtelte Routing basierend auf dem Spa-Projekt
Das verschachtelte Routing basiert auf dem Spa-Projektrouting. Der folgende Code wurde hinzugefügt und geändert. Wiederholte Codes werden nicht berücksichtigt.
//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
}
]
}
]
})
