Instalación y uso simple de Vue.js, introducción detallada

Debe tener node.js antes de preparar Vue.js.

• URL de instalación de Node.js: https://nodejs.org/en/download/.

• Referencia para pasos de instalación específicos: https://www.runoob.com/nodejs/nodejs-install-setup.html

vue.js tiene la famosa serie familiar de cubos

包含了vue-router，vuex， vue-resource，
再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

Después de la instalación, es necesario

Instala Vue.js.

1. Instale node.js, después de instalar node.js, npm también se instalará automáticamente

   Comando para verificar si la instalación es exitosa:

   node -v
   
   npm -v
   

   

2. Instale la herramienta de andamiaje vue-cli globalmente, el comando es el siguiente:

   npm install --global vue-cli
   

   

3. El comando de inicialización del proyecto vue es el siguiente, si el paquete web no está instalado, instale primero el paquete web

   npm install -g webpack   // 安装 webpack
   npm cache clean --force    // 清除 npm 缓存
   

   Proyecto

   vue init webpack myVue // myVue 项目名称
   
   project name（项目名称）  按回车
   
   project description（项目描述） 按回车
   
   author（作者） 按回车
   
   vue build（解释器） 按回车
   
   Install vue-router(路由) 按y按回车
   
   use aslantto lint your code(代码检查) 按n按回车
   
   set up unit tests(测试模块) 按n按回车
   
   setup e2e tests with night watch(是否安装e2e) 按n按回车
   
   should we run ’npm install’(是否选择npm方式)选第一个，按回车
   

• El directorio del proyecto vue después de la inicialización es el siguiente:
  

4. Vaya al directorio myVue y use npm install para instalar las dependencias en el paquete package.json

   El comando es el siguiente:

   cd myVue
   
   npm install
   

   

5. Ejecute el proyecto:

   npm run dev
   

   
   
   Ingrese: localhost: 8080 en el navegador, aparecerá la siguiente página inicial vue:

   

6. Fin de la operación del proyecto:

   Ctrl + C, seleccione Y para detener el proyecto

   

En segundo lugar, la descripción del directorio del proyecto vue

Nombre de archivo	Introduccion
construir	Código relacionado con la compilación del proyecto (webpack)
config	Directorio de configuración, incluido el número de puerto, etc.
nodo_módulos	Bloques de dependencia del proyecto cargados por npm
src	Aquí está el directorio que queremos desarrollar, básicamente todo lo que hay que hacer está en este directorio. Contiene varios directorios y archivos:
bienes	Coloque algunas fotos, como logotipos, etc.
componentes	Nuestros componentes de archivo de desarrollo almacenados en este directorio, los principales archivos de desarrollo se almacenan aquí
Ver aplicación	Archivo de entrada del proyecto
main.js	El documento central del proyecto.
enrutador	Directorio de configuración de enrutamiento
estático	Coloque algunos archivos de recursos estáticos.
prueba	El directorio de prueba inicial se puede eliminar.
archivo .xxxx	Estos son algunos archivos de configuración, que incluyen configuración de sintaxis, configuración de git, etc.
index.html	Documento de entrada al hogar
package.json	Archivo de configuración del proyecto
README.md	Documentación del proyecto, formato de descuento

Tres, vue proceso de inicio del proyecto

1. Al ejecutar npm run dev, encontrará el archivo package.json en el proyecto en la carpeta actual e iniciará el servidor de desarrollo. El puerto predeterminado es 8080;

   

2. Busque el archivo main.js de src, la instancia de Vue nuevo en este archivo, la aplicación de contenido de plantilla que se cargará;

   

3. La aplicación es el archivo al final de App.vue en el directorio src;

   

4. En la plantilla correspondiente a App.vue, hay una vista de enrutador en el directorio src con una carpeta de enrutador. Esta carpeta tiene un archivo index.js. Este archivo es el diccionario de enrutamiento de configuración y la dirección de enrutamiento especificada está vacía. Componente HelloWorld

   

注：刚才也说过了，vue运行是基于node环境的，所以 构建vue框架之前，一定要确保node环境安装成功

Cuarto, el uso de componentes Vue

1. En la componentscreación del archivo de carpetas .vue final

   Por ejemplo: src/components/public/directorio de Nueva header.vuearchivo

   

   El contenido del archivo header.vue es el siguiente:

   

2. Introduzca componentes en el archivo de configuración de enrutamiento src / router / index.js y configure el enrutamiento de componentes

• Introducir componentes

  import Header from '@/components/public/header'
  

• Configurar el enrutamiento de componentes

  {
  	path: '/header',
  	name: 'header',
  	component: Header
  }
  

  

3. Ejecute el proyecto:npm run dev

4. Ingrese en el navegador: localhost: 8080 / header, se muestra la siguiente página:

   

Adjunto: vue diagrama del ciclo de vida

Dirección original de referencia: https://baijiahao.baidu.com/s?id=1621989444415819861&wfr=spider&for=pc