[Vue] Utilice vue-cli para crear enrutamiento para proyectos SPA y enrutamiento anidado

1. Construcción del proyecto SPA

1. Preparación preliminar

Nuestra preparación preliminar es configurar Node.js y probar:
node -v
npm -v

2. Utilice Vue-cli para crear proyectos de spa.

2.1 ¿Qué es Vue-cli?

Vue CLI es una herramienta de andamiaje oficial basada en Vue.js, que se utiliza para generar automáticamente plantillas de proyectos vue.js + webpack, que puede ayudar a los desarrolladores a construir rápidamente la infraestructura de proyectos Vue.js y proporciona una serie de herramientas de desarrollo y opciones de configuración. Vue CLI proporciona dos métodos: interfaz de línea de comandos e interfaz gráfica, que los desarrolladores pueden elegir utilizar según sus propias preferencias. Con Vue CLI, puede realizar fácilmente tareas de desarrollo comunes, como inicialización de proyectos, gestión de dependencias, desarrollo y depuración, creación y empaquetado, etc., simplificando el proceso de desarrollo de aplicaciones Vue.js y mejorando la eficiencia del desarrollo.

El comando de creación es el siguiente:
 vue init webpack xxx
xxx crea un nombre para el proyecto por sí mismo

Primero debes instalar algunos entornos necesarios como vue, vue-cli, webpack, node, etc.

2.2 Instalar vue-cli

Win + R CMD Ingrese a la ventana de comandos e ingrese el comando npm install -g vue-cli

Escriba npm install webpack -g

Después de una instalación exitosa, aparecerán los siguientes archivos:

vista

ver.cmd

vue-init

vue-init.cmd

lista de vistas

lista-vue.cmd

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, la instalación se realizó correctamente.

2.3 Utilice el andamio vue-cli para construir el proyecto.

Crear esqueleto del proyecto:

Encuentra un camino para poner este esqueleto.

Ingrese al directorio CMD para ingresar a la ventana de comandos

vue init webpack xxx : xxx es el nombre de su proyecto, el nombre del proyecto no puede usar letras chinas ni mayúsculas , y luego aparecerá el modo " preguntas y respuestas " en el terminal.

La ventana de la línea de comando cmd muestra caracteres chinos confusos , lo que se debe a que la codificación de caracteres no coincide en la ventana de la línea de comando cmd .

        Modifique la codificación de caracteres de la ventana cmd a UTF-8 y ejecute en la línea de comando: chcp 65001

        Volver al chino: chcp 936
        Estos dos comandos solo tienen efecto en la ventana actual y la codificación anterior se restaurará después de reiniciar.

Modo "Una pregunta y una respuesta"

Nombre del proyecto: Nombre del proyecto, el nombre predeterminado es spa1 al ingresar, solo presione Enter

Descripción del proyecto: Descripción del proyecto, solo presione Enter

Autor: autor, complételo casualmente o presione enter directamente

Vue build: pregunta de opción múltiple, generalmente elija la primera

Ejecutar y compilar, se recomienda oficialmente, así que elígelo.

Solo cuando se esté ejecutando, si ya existe una recomendación, seleccione la primera.

Instalar vue-router: si se requiere vue-router

Seleccione Y para usar, de modo que el proyecto generado tenga archivos de configuración de enrutamiento relevantes.

Utilice ESLint para limitar su código: si debe utilizar ESLint para limitar los errores y el estilo de su código.

Si es un novato, generalmente complete N, pero generalmente se usa en proyectos reales, para que varios desarrolladores puedan lograr una sintaxis consistente.

Configurar pruebas unitarias: si se deben instalar pruebas unitarias; N

¿Configurar pruebas e2e con Nightwatch?: Si se deben instalar pruebas e2e; N

¿Deberíamos ejecutar `npm install` después de que se haya creado el proyecto? (recomendado) (Usa las teclas de flecha)

El primer elemento "Sí, usar NPM" es si se debe usar npm install para instalar dependencias.

Seleccione todo y presione Enter para generar el proyecto. El siguiente contenido aparece para indicar que la creación del proyecto está completa. Solo podemos esperar.

Después de ejecutar el comando anterior, necesitamos cambiar la ruta actual a la carpeta SPA

cd gq_spa : cambia la ruta a la carpeta gq_spa

npm install : instala todos los módulos npm requeridos por el proyecto

Iniciar y acceder al proyecto

Escriba npm ejecutar dev

Esperando para empezar

Copie la dirección anterior http://localhost:8080/ e ingrese al navegador para visitar

Finalmente, utilice nuestro software de programación para agregar

2.4 Descripción de la estructura del proyecto Vue

Carpeta de compilación : esta carpeta es principalmente para algunas configuraciones de webpack.
1. webpack.base.conf.js : la configuración básica del paquete web, el entorno de desarrollo y el entorno de producción dependen de ello
2. webpack.dev.conf.js : configuración del entorno de desarrollo del paquete web
3. webpack.prod.conf.js : configuración del entorno de producción del paquete web
4. build.js : script de compilación del entorno de producción
5. vue-loader.conf.js : este archivo es el archivo de configuración para procesar archivos .vue
carpeta de configuración
1. dev.env.js : configura el entorno de desarrollo
2. prod.env.js : configura el entorno de producción
3. index.js : Este archivo configura el servidor proxy, por ejemplo: modificando el número de puerto
Carpeta node_modules : la carpeta que almacena el paquete de instalación de npm generado de acuerdo con la configuración de package.json durante la instalación de npm.
Carpeta src : directorio del código fuente (la carpeta más utilizada en desarrollo)
1. activos : estilos e imágenes compartidos
2. componentes : donde se almacena el código comercial, que se divide en componentes. Una página es un componente y una página también contiene muchos componentes.
3. enrutador : Establecer enrutamiento
4. App.vue : interfaz de entrada de archivos vue
5. main.js : crea una instancia de vue correspondiente a App.vue, que también es el archivo de entrada y corresponde a la configuración de entrada en webpack.base.config.js
Carpeta estática : los archivos almacenados no serán procesados por el paquete web y se puede hacer referencia a ellos directamente. Por ejemplo, si desea hacer referencia a un archivo swf, puede configurar el cargador en el paquete web para procesar archivos con el nombre del sufijo swf. También puede hacerlo directamente coloque el archivo swf en esta carpeta como referencia.
package.json : este archivo tiene dos partes que son útiles: configurar comandos en scripts y dependencias y devDependencies, que corresponden a los paquetes de dependencia descargados globalmente y localmente, respectivamente.

3. ¿Qué es un archivo Vue?

El archivo vue es un tipo de archivo personalizado que describe un componente de Vue utilizando una sintaxis similar a HTML . Cada archivo .vue contiene tres tipos de bloques de idioma de nivel superior : <template>, <script> y <style> . Estas tres partes representan html, js y css respectivamente .

2. El proyecto SPA utiliza enrutamiento

Nuestros pasos previos:

Asegúrese de introducir la dependencia js de Vue.vue-router

Primero necesitas definir los componentes (es decir, mostrar diferentes efectos de página)

Necesidad de colocar diferentes componentes en un contenedor (colección de enrutamiento)

Reúna una colección de rutas en un enrutador

Montar la ruta en la instancia de Vue

Definir punto de anclaje

Saltar

Pasos ahora:

1. Dependencia

Asegúrate de que tengamos dependencias colgantes. En nuestro main.js , la ruta también ha sido montada, así que no te preocupes por eso.

2. Definir componentes

En la carpeta de componentes , cree el nuevo archivo vue que necesita

3. Definir el contenedor

Hay y solo puede haber un nodo raíz en <plantilla> en el archivo vue.

<script>
</script>

<template>
  <div class="index">
    这是网站的首页部分
  </div>
</template>

<style scoped>

</style>

<script>
</script>

<template>
  <div class="home">
    这是网站的介绍
  </div>
</template>

<style scoped>

</style>

4. Montar en un enrutador

<script>
export default {
  name: 'Index',
  data() {
    return {
      msg: '欢迎来到网站的首页'
    }
  }
}
</script>

<template>
  <div class="index">
    这是网站的首页部分
  </div>
</template>

<style scoped>

</style>

<script>
export default {
  name: 'home',
  data() {
    return {
      msg: '欢迎来到网站的介绍部分'
    }
  }
}
</script>

<template>
  <div class="home">
    这是网站的介绍
  </div>
</template>

<style scoped>

</style>

5. Definir relaciones de enrutamiento

Defina la relación de enrutamiento en el archivo index.js en la carpeta del enrutador

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/components/Index'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/Home',
      name: 'Home',
      component: Home
    }, {
      path: '/Index',
      name: 'Index',
      component: Index
    }
  ]
})

Defina su propia relación escrita

6. Definir puntos de anclaje

Definir el punto de anclaje en App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png"><br>
    <router-link to="/Index">首页</router-link>
    <router-link to="/Home">介绍</router-link>
    <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>

7. prueba

3. Los proyectos SPA utilizan enrutamiento anidado

1. Efecto de visualización final

2. Pasos

2.1 Definir puntos de anclaje

Seleccione el ancla de definición de página que necesita definir

2.2 Armar y definir contenedores.

Defina el contenedor y reúna el contenido requerido en unos sencillos pasos

2.3 Definir relaciones

Añade tu propia relación

No podemos agregarlo directamente más tarde, necesitamos usar la matriz secundaria para agregarlo a la página especificada, de lo contrario no podremos mostrar el efecto que necesitamos.

2.4 Pruebas

Finalmente, mostraremos uno de nuestros efectos.

Eso es todo por compartir, gracias a todos por leer.

¡Todos son bienvenidos a discutir en el área de comentarios! ! !