Ingrese el siguiente comando en la ventana cmd para verificar que la instalación de vue se haya realizado correctamente. Nota: la V aquí está en mayúsculas. Si tiene éxito, se imprimirá el número de versión.

vue -V

2. Cree el proyecto con vue-cli

2.1 Usar scaffolding para crear el esqueleto del proyecto

En la ventana de comandos de cmd, vaya al directorio de almacenamiento del proyecto y ejecute el siguiente comando:

vue init webpack spa1

spa1 es el nombre del proyecto, que se puede ingresar de acuerdo con la implementación.

Nota 1: La ventana de la línea de comandos de cmd muestra caracteres chinos ilegibles, principalmente porque la codificación de caracteres de la ventana de la línea de comandos de cmd no coincide. Modifique la codificación de caracteres de la ventana de cmd a UTF-8, ejecute en la línea de comandos: chcp 65001, volver a chino: chcp 936, este Los dos comandos solo tienen efecto en la ventana actual, y la codificación anterior se restaurará después de reiniciar. no puedo manejar

A continuación, el instalador entrará en un modo de instalación de preguntas y respuestas:

1) Nombre del proyecto: nombre del proyecto, el valor predeterminado es el nombre spa1 cuando lo ingresó, presione Entrar directamente
2) Descripción del proyecto: descripción del proyecto, presione Entrar directamente
3) Autor: Autor, solo complete o presione Entrar
4) Vue build: opción múltiple, generalmente elige la primera

Tiempo de ejecución + Compilador: recomendado para la mayoría de los usuarios // Tiempo de ejecución más compilación, recomendado oficialmente

Solo en tiempo de ejecución: alrededor de 6 KB más livianos min + gzip, pero las plantillas (o cualquier HTML específico de Vue) SOLO se permiten en archivos .vue; las funciones de procesamiento se requieren en otros lugares // 仅运行时

5) Instale vue-router: si necesita vue-router, Y elige usarlo, de modo que el proyecto generado tendrá archivos de configuración de enrutamiento relacionados
6) Use ESLint para filtrar su código: si usar ESLint para limitar sus errores de código y estilos norte

Configurar pruebas unitarias (S/n) N
7) ¿Configurar pruebas e2e con Nightwatch?:
¿Deberíamos ejecutarlo npm install después de que se haya creado el proyecto? (recomendado) (Use las teclas de flecha)
> Sí, use NPM (seleccione esta opción)
> Sí, use Yarn
> No, lo manejaré yo mismo

Después de seleccionar todo y presionar Enter, se genera el proyecto. Aparece el siguiente contenido para indicar que el proyecto está creado.
#Inicialización del proyecto finalizada!
#==================== ======

2.2 Vaya al directorio del nuevo proyecto e instale los módulos necesarios

Este paso es similar a maven instalando dependencias a través de archivos pom.
Ordenar:

npm install

Necesita algo de tráfico, utilice una red más rápida.

Una vez completada la instalación, en la ventana de comandos, vaya al directorio del proyecto y ejecute el siguiente comando:

npm run dev

Ejecute el proyecto y aparecerá: Su aplicación se está ejecutando aquí: http://localhost:8080, lo que significa que la operación se realizó correctamente. Ingrese http://localhost:8080 en la barra de direcciones del navegador para ver.

2.3 Cómo modificar el número de puerto

Cuando el proyecto se está ejecutando, el puerto predeterminado es 8080. Si otros programas también usan este puerto, causará conflictos.Si Tomcat también usa 8080 de manera predeterminada, se debe cambiar el número de puerto para evitar conflictos.
Abra el archivo config/index.js en el directorio del proyecto y modifique el puerto en la parte de desarrollo.

2.4 Agregar módulo element-ui

Al agregar element-ui, primero detenga el servicio y use el siguiente comando para instalar el módulo element-ui.

npm install element-ui -S

Nota 1: Use vue+elementUI para crear un proyecto SPA. En general, la estructura de su proyecto consiste en lo siguiente:
* Vue + ESLint + webpack + elementUI + ES6
Vue: el marco principal
* ESLint: Ayúdenos a verificar errores de sintaxis en Javascript programación, de modo que en un Múltiples desarrolladores en el proyecto puedan lograr una sintaxis consistente
* Webpack: es un paquete de módulos estáticos para aplicaciones JavaScript modernas. La configuración central en todo el proyecto
* elementUI: es un conjunto de marco de estilo basado en vue, hay muchos estilos de componentes empaquetados
* ES6: el nombre completo es ECMAScript6.0, que es la próxima versión estándar de JavaScript, lanzada en 2015,06

2.5 Explicación detallada de package.json

Debajo del directorio raíz de cada proyecto, generalmente hay un archivo package.json que define varios módulos requeridos por el proyecto, así como información de configuración del proyecto (como metadatos como nombre, versión, licencia, etc.). Según este archivo de configuración, el comando npm install descarga automáticamente los módulos necesarios, es decir, los entornos de ejecución y desarrollo necesarios para configurar el proyecto.
Para más detalles, consulte las notas relevantes en los datos "paquete-detallado.json"

3. Parámetros -g, -S, -D en el comando de instalación

Ordenar	sentido
instalar npm	Descargue todos los módulos dependientes configurados en dependencias y dependencias de desarrollo en "paquete.json" y guárdelos en el directorio node_modules del proyecto
npm instalar xxx -g	Instale globalmente, descargue módulos dependientes y guárdelos en el directorio %node_home%\node_global\node_modules
npm instalar xxx -S	Escriba en el objeto de dependencias de package.json y guárdelo en el directorio node_modules del proyecto
npm instalar xxx -D	Escriba en el objeto devDependencies de package.json y guárdelo en el directorio node_modules del proyecto

Nota 1: cuando git clona el proyecto, no hay una carpeta node_modules en el archivo del proyecto, ¿por qué?
Sabemos que este archivo (project_home\node_modules) almacena los módulos dependientes utilizados en el desarrollo de nuestro proyecto. Esta carpeta puede tener un tamaño de cientos de megabytes. Si se coloca en github, será muy lento para que otras personas la clonen. En este momento, pensé en usar un archivo de configuración de dependencia de package.json para resolver este problema. De esta manera, cuando todos descarguen este proyecto, solo necesitan ingresar al directorio del proyecto y directamente npm install npm irá allí para encontrar la biblioteca de funciones requerida, es decir, las dependencias.

El nombre completo del comando abreviado, preste atención al caso, -S, -D están en mayúsculas

Ordenar	nombre corto
Instalar en pc	i
--ahorrar	-S
--save-dev	-D
--global	-gramo

4. Descripción de la estructura del proyecto Vue

carpeta	documento	efecto
construir		Esta carpeta es principalmente para alguna configuración 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 webpack
	webpack.prod.conf.js	configuración del entorno de producción del paquete web
	construir.js	Guión de compilación de producción
	vue-loader.conf.js	Este archivo es el archivo de configuración para manejar archivos .vue
carpeta de configuración		archivo de configuración
	dev.env.js	Configurar el entorno de desarrollo
	prod.env.js	Configurar el entorno de producción
	índice.js	Este archivo configura el servidor proxy, por ejemplo: modificación del número de puerto
node_modules		La carpeta para almacenar 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 de origen (la carpeta más utilizada en desarrollo)
	activos	Estilos e imágenes compartidos
	componentes	El lugar donde se almacena el código comercial se divide en componentes para el almacenamiento, una página es un componente y una página también contendrá muchos componentes.
	enrutador	establecer ruta
	aplicación.vue	interfaz de entrada de archivos vue
	principal.js	Cree una instancia de vue correspondiente a App.vue, que también es un archivo de entrada, correspondiente a la configuración de entrada en webpack.base.config.js
carpeta estática		Los archivos almacenados no serán procesados por webpack y se puede hacer referencia a ellos directamente. Por ejemplo, si desea consultar el archivo swf, puede configurarlo en webpack. También puede colocar directamente el archivo swf en esta carpeta como referencia.
paquete.json		Hay dos partes en este archivo que son útiles: establecer comandos en scripts y dependencias y devDependencies, que corresponden a las dependencias de descarga global y descarga local, respectivamente.

5. ¿Qué es un archivo *.vue?

El archivo *.vue es un tipo de archivo personalizado que describe un componente Vue con 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.

Nota:
1) El código HTML no se puede envolver directamente en <template></template>, pero se debe colocar una etiqueta html dentro para envolver todo el código. En general, la etiqueta <div></div> se usa para contener otros codes , también se pueden usar otras etiquetas, siempre que haya un elemento raíz.

<template>
    <div>
        ...
    </div>
</template>

2) El código js se escribe en la etiqueta <script> y se exporta a través de export

<script>
    export default {
        name: 'App'
    }
</script>

6. Proceso de inicio

Diagrama de flujo:

1) Al ejecutar npm run dev, buscará el archivo package.json en el directorio actual, que es algo similar al archivo pom.xml de Maven, incluida la versión del nombre del proyecto, las dependencias del proyecto y otra información relacionada.
2) Como puede ver en el archivo package.json, después de iniciar el comando npm run dev, se cargará la configuración build/webpack.dev.conf.js y se iniciará webpack-dev-server
3) webpack.dev. Se presenta conf.js El contenido de muchos módulos incluye los archivos de configuración del entorno del servidor en el directorio de configuración.

const config = require('../config')

4) El archivo index.js en el directorio de configuración contiene la información de configuración necesaria para iniciar servicios como el host y el puerto. El número de puerto predeterminado se puede modificar en este archivo de configuración. Configure en este archivo de la siguiente manera:

index: path.resolve(__dirname, '../dist/index.html'),

El index.html en la configuración es el archivo index.html en el directorio raíz del proyecto.
5) El contenido de index.html es muy simple, principalmente para proporcionar un div para vue mount.
6) En main.js, se introducen los módulos vue, App y router, se crea una instancia de vue y el contenido del módulo App.vue se monta en la etiqueta div de index.html cuyo id es app, y se crea una ruta configuración enlazada.
7) main.js coloca el contenido del módulo App.vue bajo la etiqueta div de index.html para ver el contenido de App.vue. El contenido de esta página tiene un logotipo y una <router-view/>, <router -view El contenido de /> está determinado por la configuración del enrutador.
8) El archivo index.js en el directorio del enrutador es donde se configura el enrutamiento. Se puede ver en la configuración que al acceder a la ruta "/", el contenido de la plantilla HelloWorld se colocará en la <vista-router/> mencionada anteriormente.
9) HelloWorld contiene principalmente información de introducción de Vue.
10) La composición de la página: index.html -- (incluido) --> App.vue -- (incluido) --> HelloWorld.vue

7. Ejemplo de desarrollo

7.1 Hacer un componente personalizado Bienvenido

1) Cree un componente personalizado Welcome.vue en componentes

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',

  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>

<!-- scoped表示定义的样式只在当前组件中有效 -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

2) Configure el enrutamiento en router/index.js. Al configurar el enrutamiento, preste atención a la importación de componentes primero

import Welcome from '@/components/Welcome'

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

Cambiamos el HelloWorld que se muestra de forma predeterminada al componente Welcome. Ejecute el sistema para observar la visualización de la página.

7.2 Agregue los componentes "Administración de usuarios" y "Acerca de nosotros"

Se agrega un nuevo directorio de vistas en src para almacenar componentes comerciales, y los componentes se usan para procesar componentes públicos.

1) Definir el componente Acerca de

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>关于我们</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'About',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

2) Definir el componente UserMsg

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

3) Defina la ruta en router/index.js y preste atención para importar el componente primero al configurar la ruta

import About from '@/views/About'
import UserMsg from '@/views/UserMsg'
....
    {
        path: '/About',
        name: 'About',
        component: About
    },
    {
        path: '/UserMsg',
        name: 'UserMsg',
        component: UserMsg
    }

4) Agregue el enlace del enrutador al componente de Bienvenida para configurar la ruta de enrutamiento. El contenido modificado es el siguiente:

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <p>
      <router-link to="/UserMsg">用户管理</router-link>
      <router-link to="/About">关于我们</router-link>
    </p>
    <!-- 这里的配置的router-view是没有效果的，起效的时候App.vue中的
    router-view，这一点通过页面效果可以看出来，在点击“用户管理”或“关于我们”
    后，msg定义的提示信息没了，但vue的logo还在。
    <div>
      <router-view/>
    </div> -->
  </div>
</template>

<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',

  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>

7.3 Enrutamiento anidado

En el módulo de administración de usuarios, cree un registro de usuario y cambie la contraseña para demostrar el enrutamiento anidado

1) Crear registro de usuario UserRegister

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户注册</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserRegister',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

2) Modificación de contraseña UserPwdUpdate

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>修改密码</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserPwdUpdate',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

3) Configurar
el enrutamiento Antes de configurar el enrutamiento, primero importe los componentes

import UserRegister from '@/views/UserRegister'
import UserPwdUpdate from '@/views/UserPwdUpdate'

Configurar enrutamiento:

    //此处只显示了用户管理部分路由配置，为嵌套路由
    {
      path: '/UserMsg',
      name: 'UserMsg',
      component: UserMsg,
      //注意children单词不要写错，如果写错程序不会报错，但效果出不来!!!!
      //以"/" 开头的嵌套路径会被当作根路径，所以子路由的path不需要添加 "/" !!
      children: [
        {
          path: 'UserRegister',
          name: 'UserRegister',
          component: UserRegister
        },
        {
          path: 'UserPwdUpdate',
          name: 'UserPwdUpdate',
          component: UserPwdUpdate
        }
      ]
    }

4) Agregue el enlace del enrutador al componente de administración de usuarios (UserMsg) para configurar la ruta de enrutamiento. Los componentes agregados son los siguientes:

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
      <p>
        <router-link to="/UserMsg/UserRegister">用户注册</router-link>
        <router-link to="/UserMsg/UserPwdUpdate">修改密码</router-link>
      </p>
      <div>
        <!--
        用户注册于密码修改为用户管理的子模块，所以在用户管理组件中
        使用router-view用于展示用户注册与密码修改组件。如果此处不用
        则点击用户注册与密码修改时没有任何效果
        -->
        <router-view/>
      </div>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

Mostrar resultados:

Puntos de conocimiento de la entrevista:

Comprensión de la estructura básica de directorios de vue
Diferencia entre instalar -g -S -D
El significado del símbolo @: @ representa el directorio src y @ está configurado en el archivo /build/webpack.base.conf.js
Justificación de inicio
Comprensión básica de paquete.json

Instale vue-cli y use vue-cli para construir el proyecto

1. instalación de vue-cli

1.1 Requisitos previos de instalación

1.2 ¿Qué es vue-cli?

1.3 Instalar vue-cli