Conceptos básicos de Vue (4)

andamios vue-cli

vue-cli es un andamio oficial que se utiliza para generar rápidamente una plantilla de proyecto vue.

vue-cli predefinirá la estructura del directorio y el código básico. (Similar a un directorio de proyecto generado al crear un proyecto maven) puede hacer que el desarrollo sea más rápido.

¡Puedes pensar en vue-cli como un experto! Tiene las siguientes funciones:

1. Estructura de directorio unificada
2. Depuración local
3. Despliegue en caliente
4. prueba de unidad
5. Entorno de embalaje integrado

Instalación del entorno requerida

• Node.js: https://nodejs.org/en/ (sin cerebro puede ser el siguiente paso, cargará automáticamente las variables de entorno)

• Git: https: //git-scm.com/downloads

  Espejo: https://npm.taobao.org/mirrors/git-for-windows/

Confirme que la instalación se haya realizado correctamente:

• Entrar en cmd npm -vPara ver si el número de versión se puede imprimir correctamente
• Entrar en cmd nodo -vPara ver si se puede imprimir el número de versión

npm es una herramienta de administración de paquetes, similar a pip.

Agregar espejo Taobao (cnpm)

# -g 是全局安装的意思
npm install cnpm -g

La dirección de almacenamiento de las cosas instaladas: C: \ Users \ ASUS-PC \ AppData \ Roaming \ npm \ node_modules

Pero cambié la ruta de instalación, por lo que mi instalación es: E: \ NodeJs \ node_global \ node_modules

Instale vue-cli:

cnpm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，
vue list

explicación del comando npm

• [Npm install moduleName]: instala el módulo en el directorio del proyecto
• [Npm install -g moduleName]: [-g] significa instalar el módulo globalmente, cuyo disco depende de la ruta de instalación en su archivo de configuración. Utilice el comando [prefijo de configuración npm] para ver
• [Npm install --save moduleName]: [–save] significa instalar el módulo en el directorio del proyecto y escribir las dependencias en el nodo de dependencias en el archivo del paquete. [-S] es su abreviatura
• [Npm install -save-dev moduleName]: [–save-dev] significa instalar el módulo en el directorio del proyecto y escribir las dependencias en el nodo devDependencies del archivo del paquete, [-D] es su abreviatura

Crea una aplicación vue-cli

Utilice los cuatro pasos de vue-cli para crear un proyecto vue

1. Cree un proyecto vue. Simplemente elija una carpeta vacía como directorio del proyecto. Por ejemplo, creo un directorio aquí:

D: \ Proyecto de programación \ study \ VueStudy \ vue-cli-study

2. Cree una aplicación vue basada en la plantilla de paquete web: (use cmd para ejecutar comandos)

# myvue 是项目名称
vue init webpack myvue

¡Entonces elige no hasta el final!

Por favor, lea este blog por fallas de instalación: https://www.cnblogs.com/taiyanghua0522/p/6043942.html

Solo intenta restaurar el HOST original primero

Y luego ejecutarvue init paquete web myvuemando. La captura de pantalla es la siguiente:

¡Entonces habrá un proyecto myvue en su directorio de proyectos!

3. Importación de dependencias

# 进入myvue项目目录
cd myvue

# 安装依赖环境，这个是根据myvue项目目录中的package.json进行依赖安装的，所以上面要进入myvue
npm install

Una vez completada la ejecución, el directorio tendrá muchas más dependencias.

4. Inicie el proyecto

# 运行项目，启动的是nodejs的服务器。（并不是tomcat服务器）
npm run dev

Luego ábralo a través de IDEA para comenzar el desarrollo.

De los pasos anteriores, se puede ver que en realidad es similar al proyecto de compilación de maven, excepto que maven construye automáticamente el directorio e importa automáticamente las dependencias sin ingresar instrucciones.

Entrada al código fuente: myvue / src / main.js

La entrada principal del programa: index.html (se conecta al objeto vue en main.js), la página principal permanece sin cambios

Aprendizaje y uso de webpack (proceso de ejecución del proyecto vue)

webpack es una aplicación de JavaScript, que se utiliza para el empaquetado de módulos estáticos. Cuando el paquete web está empaquetado, construirá recursivamente un gráfico de dependencia (es decir, quién depende de quién, cuál es la relación padre-hijo), que contiene cada módulo requerido por la aplicación, y luego empaqueta estos módulos en uno o más paquetes.

La función del paquete web: se utiliza para degradar el código de la especificación ES6 al código de la especificación ES5. La razón es: ¡ahora la mayoría de los navegadores no son compatibles con ES6!

1. Instale un paquete web

npm install webpack -g
npm install webpack-cli -g

Verifique si la instalación es exitosa: use el método para verificar el número de versión

webpack -v
wevpack-cli -v

Webpack se usa para empaquetar, por lo que podemos ver un archivo llamado [webpack.base.config.js] en el directorio [build] en el directorio del proyecto Este archivo se usa para configurar el paquete webpack. (En otras palabras, webpack solo proporciona programas de procesamiento por lotes relacionados, pero este programa de procesamiento por lotes requiere que configure manualmente cierta información para el proceso correspondiente)

Aquí interpretamos el archivo [webpack.base.config.js] creado por vue-cli escribiendo un [webpack.config.js] por nosotros mismos.

2. Interprete el archivo webpack.config.js

• entrada: archivo de entrada, especifique qué archivo webpack utiliza como entrada del proyecto
• salida: salida, especifique paquete web para colocar los archivos procesados ​​en el directorio especificado
• módulo: módulo, ingrese el módulo especificado
• plungins: complementos, como actualizaciones en caliente, reutilización de código, etc. Escriba el complemento especificado
• resolver: establece la ruta a
• reloj: monitor, utilizado para empaquetar directamente después de configurar los cambios de archivo

Exponer un método

Exponer un método en el archivo module / hello.js

// 暴露一个方法，这个方法是hello.js中方法。如果其他地方想用必须引用
// 但是根据Commentjs规范中的原则，只有暴露的东西才能在外面引用
exports.sayHi = function () {
    
    
    document.write("<h1>Hello!</h1>")
};

Introducir un módulo

Introduzca un módulo (script js) en module / main.js

var hello = require("./hello");
hello.sayHi();

También se puede hacer referencia a Js a través de una etiqueta [script]. Pero este método no es bueno, porque todas las variables y funciones globales en cada archivo js se colocarán en el objeto de la ventana, por lo que poner varios archivos juntos causará conflictos con el mismo nombre.

Pero use [exportaciones] para exponer objetos o métodos, y [requiera] para recibir módulos (el módulo recibido se usa como un objeto, y los objetos o métodos expuestos en el módulo se llaman usando llamadas de puntos )¡Esto evita efectivamente el problema de los conflictos de nombres duplicados!

Cree un paquete web.config.js

En el módulo para crear el directorio de archivos del directorio principal.

module.exports = {
    
    
    // 打包后程序的入口，相当于某个java类中的main方法。一个程序只能有一个main方法
    entry: "./modules/mian.js",
    // 将打包好的程序输出到哪儿，
    output: {
    
    
        // 输出的文件名，没有会创建一个文件
        filename: "./js/bundle.js"
    }
}

Utilice el método [exportaciones] del objeto [módulo] para configurar.

3. Empaquete la pequeña demostración

Mueva la terminal al directorio donde se encuentra [webpack.config.js], y luego use el comando [webpack] para empacar.

Una vez que el paquete web se haya empaquetado correctamente, aparecerá el contenido de la terminal y se generará un archivo dist / js / bundle.js

4. Introducción de la entrada frontal

La introducción del archivo empaquetado en el índice del archivo de entrada del proyecto web tendrá la página y su lógica (la página está compuesta por componentes de plantilla vue y la lógica está escrita por js)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="dist/js/bundle.js"></script>
    </body>
</html>

Se puede ver en lo anterior que Vue coloca la página de inicio en la plantilla, y la plantilla está escrita por js. La página de inicio del proyecto vue se convierte en la mayoría de los archivos js, la mayoría de los archivos vue y un archivo html (archivo de entrada de índice).

Esto es similar a que jsp puede ser reemplazado por servlet.

Una vez empaquetados todos los archivos js y vue, los archivos empaquetados se pueden importar directamente al archivo de índice para mostrarlos.

¡Este es el desarrollo modular de front-end!