1. Preparación ambiental
Primero, necesitamos instalar nodeJs en nuestra máquina de desarrollo. Si no está seguro de haberlo instalado, puede usar el siguiente comando para verificar:
node -v #查看node版本，检查是否安装node
npm -v
yarn -v
Si la versión se muestra normalmente, significa que nodeJs se ha instalado. De lo contrario, puede visitar el sitio web oficial de node: http://nodejs.cn/download/ para descargar e instalar node.
2. Instalación global de Vue CLI
Comando de instalación:
npm install -g vue-cli # -g 全局安装Usar npm puede ser más lento. Podemos usar cnpm - el espejo doméstico de npm. La ventaja de usar cnmp es que será más rápido descargar contenido en el futuro, pero es posible que el paquete descargado no sea el más reciente. Comando para instalar cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.orgPuede haber problemas al usar cnpm y la dependencia de descarga falla. Si no puede continuar, puede eliminar la dependencia en la carpeta node_modules y ejecutar el comando para descargar la dependencia nuevamente.
Una vez completada la instalación, puede ver el uso de comandos de vue con el siguiente comando:
vue -hTres, inicializa el proyecto
Comando de inicialización:
vue init webpack vue-blog(项目名称/文件夹名称)
init: Significa que quiero usar vue-cli para inicializar el proyecto
<template-name>(webpack): indica el nombre de la plantilla, vue-cli nos proporciona oficialmente 5 plantillas,
webpack: una plantilla completa de paquete web + vue-loader con funciones que incluyen carga en caliente, formación de pelusas, detección y extensión CSS.
webpack-simple: una plantilla simple de webpack + vue-loader, que no contiene otras funciones, lo que le permite crear rápidamente un entorno de desarrollo vue.
browserify: una plantilla completa de Browserify + vueify, las funciones incluyen carga en caliente, formación de pelusas y detección de unidades.
browserify-simple- una plantilla simple de Browserify + vueify, no contiene otras funciones, puede construir rápidamente un entorno de desarrollo vue.
-simple : una de las plantillas de aplicación de una sola página más simples.
<project-name>(vue-blog): Identifica el nombre del proyecto, puede nombrarlo según su propio proyecto.
Al ejecutar el comando, se iniciará la descarga de un proyecto con el nombre especificado.Necesitamos especificar los siguientes parámetros del proyecto. Use el nombre del proyecto predeterminado directamente, elija instalar vue-router, ESLint es una herramienta de inspección de calidad de código, aquí elijo instalar.
- Nombre del proyecto: nombre del proyecto, si no necesita cambiarlo, simplemente presione Entrar. Nota: aquí no se pueden utilizar las mayúsculas.
- Descripción del proyecto: descripción del proyecto, el valor predeterminado es un proyecto de Vue.js, presione Entrar directamente, no es necesario escribir.
- Autor: Autor, si tienes un autor que configura git, lo leerá.
- ¿Instalar vue-router? Si desea instalar el complemento de enrutamiento de vue, seleccione Y.
- ¿Usar ESLint para filtrar su código? Si desea usar ESLint para limitar los errores de código y el estilo, es mejor configurarlo.
- ¿Configurar pruebas de e2e con Nightwatch? Si instalar e2e para realizar pruebas de simulación de comportamiento del usuario.
Cuarto, inicia el proyecto
Ingrese a la carpeta del proyecto y ejecute el comando de ejecución dependiente:
# 进入项目文件夹
cd vue-blog
# 运行项目-dev方式
npm run dev
Una vez que el proyecto se haya construido correctamente, visite http: // localhost: 8080, puede ver el siguiente contenido, lo que indica que la implementación está completa.
Cinco, introducción a la configuración del archivo de proyecto
- build (configuración inicial del paquete web)
- config (index.js - configuración del proyecto)
- node_modules (módulos dependientes del proyecto, código base)
- src (archivo de programa)
- static (recurso de archivo estático)
- prueba (código de prueba)
- index.html (Entrada a la página de inicio del proyecto)
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.