1. ¿Qué es Vue-cli?
Es una herramienta de andamiaje de Vue lanzada oficialmente que se utiliza para construir rápidamente estructuras de proyectos de Vue y proporciona algunas funciones básicas necesarias para el desarrollo front-end moderno, como: empaquetado de paquetes web, verificación de sintaxis de ESLint, pruebas unitarias, implementación automatizada, etc. Al mismo tiempo, Vue-CLI también integra algunos complementos muy prácticos, como vuex, vue-router, etc., para que nuestro desarrollo sea más rápido y eficiente.
En segundo lugar, ¿qué es un spa?
El nombre completo es Aplicación de una sola página, que se refiere a una aplicación de una sola página. Es un patrón arquitectónico para aplicaciones web que separa el front-end y el back-end, el front-end es responsable de mostrar páginas e interactuar, y obtiene datos del back-end a través de solicitudes asincrónicas para lograr actualizaciones dinámicas de la aplicación. Las ventajas del proyecto SPA incluyen una rápida velocidad de respuesta, una buena experiencia de usuario, un volumen reducido de transmisión de datos, etc. Los marcos SPA comunes incluyen Angular, React, Vue, etc.
3. Construir oficialmente el proyecto de spa.
1. Instale Vue-cli
instalación npm -g vue-cli
2. Instalar los componentes del paquete web
npm install -g webpackDespués de que el comando se ejecute correctamente, verifique si la instalación se realizó correctamente.
vista -V
Si la instalación es exitosa, aparecerá el número de versión correspondiente. Como se muestra abajo
Al mismo tiempo, se generarán archivos en el archivo node_global.
3. Utilice el andamio vue-cli para construir el proyecto.
Busque la ubicación donde está almacenado el proyecto Vue e ingrese cmd
Cree un proyecto SPA después de ingresar a la ventana de comandos (se informará un error si el nombre del proyecto es demasiado largo)
vue init nombre del proyecto del paquete web
Como se muestra en la imagen:
4. Inicie el proyecto
nombre del proyecto del cd para ingresar el proyecto SPA creado
npm run dev inicia el proyecto
Como se muestra en la imagen:
Interfaz predeterminada del proyecto de spa:
5. Introducción a la estructura
Versión vue-cli2.0 (diferentes versiones pueden provocar cambios estructurales)
carpeta de compilación Esta carpeta es principalmente para algunas configuraciones de webpack
webpack.base.conf.js la configuración básica del paquete web, el entorno de desarrollo y el entorno de producción dependen de
webpack.dev.conf.js configuración del entorno de desarrollo del paquete
web webpack.prod.conf.js paquete web Configuración del entorno de producción
build.js Script de compilación del entorno de producción
vue-loader.conf.js Este archivo es el archivo de configuración para procesar archivos .vuecarpeta de configuración
dev.env.js configura el entorno de desarrollo
prod.env.js configura el entorno de producción
index.js Este archivo se utiliza para configurar el servidor proxy, por ejemplo: modificar el número de puerto.La
carpeta node_modules almacena el npm generado según la configuración de package.json durante la instalación de npm.Carpeta del paquete de instalaciónCarpeta src Directorio de código fuente (la carpeta más utilizada en desarrollo)
Activos Estilos e imágenes compartidos
Componentes donde se almacena el código comercial, que se divide en componentes para su almacenamiento. Una página es un componente y una página también contiene muchos componentes.
Conjuntos de enrutadores la ruta
App.vue interfaz de entrada del archivo vue
main.js corresponde a App.vue para crear una instancia de vue, que también es el archivo de entrada y corresponde a la configuración de entrada en webpack.base.config.jsLos archivos almacenados en la carpeta estática no serán procesados por webpack y se puede hacer referencia a ellos directamente. Por ejemplo, si desea hacer referencia a un archivo swf, puede configurar el
cargador en webpack para procesar archivos con el nombre del sufijo swf, o puede Coloque directamente el archivo swf en esta carpeta para hacer referencia al
paquete. Hay dos partes del archivo json que son útiles: configurar comandos en scripts y dependencias y devDependencies, que
corresponden a los paquetes de dependencia descargados global y localmente, respectivamente.
Como se muestra en la imagen:
6. Uso de enrutamiento en proyectos de spa
Definir componentes
<template>
<div>这是网站的发展历程</div>
</template>
<script>
export default {
name: 'About',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
Configurar el enrutamiento:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld from '@/components/Home'
import HelloWorld from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/',
name: 'About',
component: About
}
]
})
6. Uso de enrutamiento anidado
Modificar el componente Home.vue
<template>
<div> <router-link to="/myvue">本站信息</router-link>
<router-link to="/myvue">本站信息</router-link>
<router-view></router-view></div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
6.2 Agregar nuevos componentes
<template>
<div>
本站存在意义，以及本站简介、功能介绍
</div>
</template>
<script>
export default {
name: 'mynode',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
<template>
<div>
本站创始人介绍，个人经历，未来发展
</div>
</template>
<script>
export default {
name: 'myvue',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
enrutamiento
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 mynode from '@/components/mynode.vue'
import myvue from '@/components/myvue.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
children:[
{
path:'/mynode',
name:'mynode',
component:mynode
},
{
path:'/myvue',
name:'myvue',
component:myvue
}
]
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/About',
name: 'About',
component: About
}
]
})
resultado
