vue scaffolding v-cli, el primer programa vue

1. instalación de v-cli

• Al reproducir el scaffolding de cliente v-cli vue, se debe instalar node.js, que es una herramienta para la administración de front-end de paquetes js
• Instale oficialmente andamios vue-cli

1. npm install vue-cli -g
2. vue list 

Si la lista de vue no está disponible, cierre sesión en la computadora

2. Utilice el paquete web para crear programas vue

1. Seleccione un directorio, abra la ventana cmd en este directorio, todos los pasos son los siguientes

vue init webpack myvue # 等待nodejs构建
cd myvue  # 进入myvue目录下
npm install 
npm run dev 

Al crear el proyecto, completará la información del proyecto, seleccioné no para todos, puede elegir sí, el complemento se agregará automáticamente al proyecto

después de la instalación de npm, puede haber errores, solo siga las instrucciones para solucionarlo.

Ejecute el proyecto actual y visite el puerto a continuación.

Acceda al proyecto

3. Introducción al catálogo

• Uso la carpeta abierta por idea
  

4. paquetes webpack vue en archivos js

• La instalación del paquete web empaqueta y compila la sintaxis de es6 en la sintaxis de es5 para ejecutar

npm install webpack -g  # 打包工具
npm install webpack-cli -g # 客户端工具

Puntos de desarrollo del módulo de front-end, cada paquete se puede presentar entre sí. Archivo js compilado por un WebPACK

hello.js

// es6 语法 exports暴露一个方法
exports.sayHi = function() {
    
    
    document.write('<h3>bitqian666</h3>')
}

main.js

// 导入js文件
let hello = require('./hello')
hello.sayHi()

Configuración del paquete

module.exports = {
    
    
    entry: './modules/main.js',
    output: {
    
    
        filename: './bundle.js'
    }
}

控制台运行 webpack

Genere bundle.js y utilícelo directamente