- Construcción de proyecto de spa.
- Completado según la ruta del proyecto del spa
- Ruta anidada completa basada en el proyecto del spa
1. Construcción de proyecto de spa
vue-cli es un andamio para vue.js, utilizado para generar automáticamente plantillas de proyecto para vue.js+webpack. El comando de creación es el siguiente:
vue init webpack xxx
Nota 1: xxx crea un nombre para el proyecto.
Nota 2 : vue, primero se debe instalar vue: -cli, webpack, node y otros entornos necesarios
Instale vue-cli
npm install -g vue-cli
npm install webpack -g
Nota 1: Después de que la instalación sea exitosa, aparecerá el siguiente archivo
D:\initPath
node-v10.15.3-win-x64
node_global
vue
vue.cmd
vue- init
vue- init.cmd
vue-list
vue-list.cmd
Nota 2: Una vez completada la instalación, abra la ventana de comandos e ingrese vue -V (tenga en cuenta la "V" mayúscula aquí). Si aparece el número de versión correspondiente, el La instalación es exitosa.
Utilice el scaffolding vue -
Vayacli (versión 2. vue init webpack spa#Este comando se utiliza para crear un proyecto SPA. Generará una carpeta llamada "spa" en el directorio actual.
#spa1 es el nombre del proyecto. El nombre del proyecto no puede utilizar letras chinas ni mayúsculas, y luego "Preguntas y respuestas" aparecen en el terminal Modo (ver Nota 2)
Nota 1: La ventana de la línea de comando cmd muestra caracteres chinos confusos, principalmente porque la codificación de caracteres de la ventana de la línea de comando cmd no coincide, lo que lleva a
modificar la codificación de caracteres de la ventana cmd a UTF-8 Ejecute en la línea de comando: chcp 65001 para volver
al chino: Los dos comandos chcp 936
solo tienen efecto en la ventana actual. La codificación anterior se restaurará después de reiniciar.Nota 2: Modo “Una pregunta y una respuesta”
1.Nombre del proyecto: nombre del proyecto, el nombre predeterminado es spa1 cuando se ingresa, solo presione enter
2.Descripción del proyecto: Descripción del proyecto, solo presione Enter
3.Autor: Autor, complételo casualmente o presione Entrar directamente
4.Vue build: pregunta de opción múltiple, generalmente elija la primera
4.1.Runtime + Compilador: recomendado para la mayoría de los usuarios // Runtime + Compilador, recomendado oficialmente, elíjalo
4.2.Solo tiempo de ejecución: aproximadamente 6 KB más ligero min+gzip, pero las plantillas (o cualquier HTML específico de Vue) SÓLO se permiten en archivos .vue
- las funciones de renderizado se requieren en otros lugares//Solo en tiempo de ejecución, si ya existe una recomendación, elija la primera
5.Instale vue-router: si necesita vue-router, elija usarlo para que el proyecto generado tenga archivos de configuración de enrutamiento relevantes.
6.Utilice ESLint para limitar su código: si desea utilizar ESLint para limitar los errores y el estilo de su código. N No es necesario para principiantes, pero generalmente se usa en proyectos reales, para que varios desarrolladores puedan lograr una sintaxis consistente.
7.Configurar pruebas unitarias: si se deben instalar pruebas unitarias N
8. ¿Configurar las pruebas e2e con Nightwatch?: Si se deben instalar las pruebas e2e N
9. ¿Deberíamos ejecutar `npm install` después de que se haya creado el proyecto? (recomendado) (Usa las teclas de flecha)
> Sí, use NPM
Sí, usa hilo
No, lo manejaré yo mismo //Pregunta de opción múltiple: elija el primer elemento "Sí, usar NPM" si desea usar npm install para instalar dependencias
Seleccione todo y presione Entrar para generar el proyecto. El siguiente contenido aparece para indicar que se completó la creación del proyecto.
# ¡La inicialización del proyecto finalizó!
## Paso 2: Después de ejecutar el comando anterior, debemos cambiar la ruta actual a la carpeta SPA y luego instalar los módulos necesarios
## Este paso puede entenderse como: Una vez que el proyecto web maven se haya creado correctamente, modifique el archivo pom para agregar dependencias.
cd spa1 #Cambiar la ruta a la carpeta spa1
npm install #Instala todos los módulos npm requeridos por el proyecto
## Paso 2: Después de ejecutar el comando anterior, debemos cambiar la ruta actual a la carpeta SPA y luego instalar los módulos necesarios
## Este paso puede entenderse como: Una vez que el proyecto web maven se haya creado correctamente, modifique el archivo pom para agregar dependencias.
cd spa1 #Cambiar la ruta a la carpeta spa1
npm install #Instala todos los módulos npm requeridos por el proyecto
## Paso 3: Iniciar y acceder al proyecto
## Este paso puede entenderse como: inicie Tomcat y acceda al proyecto a través del navegador
cd spa1
npm ejecutar desarrollador
Nota 1: una vez que el proyecto se haya iniciado correctamente, abra el navegador e ingrese "http://localhost:8080"
Nota 2: Para proyectos creados por vue-cli, después de iniciar npm run dev en la consola, la dirección de depuración predeterminada es el puerto 8080.
2. Ruta completa basada en el proyecto del 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. Complete el enrutamiento anidado según el proyecto del spa
La ruta anidada se basa en la ruta del proyecto del spa. Se ha agregado y modificado el siguiente código. No se incluirán códigos repetidos.
//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
}
]
}
]
})
