02Vue3-Vue-cli(Vue脚手架)

Vue-CLI (Command Line Interface)
Vue-CLI 是Vue官方提供的脚手架工具
Vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
利用vue-cli脚手架来构建Vue项目需要先安装Node.js和NPM环境。

• 开发环境：WebStorm
• 命令安装：npm install -g @vue/cli
• 检查版本：vue --version
• 创建项目：vue create 项目名称
• 选择Vue3，默认安装插件

目录结构

常见项目的目录结构，如下所示：

.
|-- 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                  // 测试环境变量
|-- node_modules		   //所需要依赖资源
|-- src                              // 源码目录
|   |--  assets                   	   //存放资产文件
|   |-- components                   // vue公共组件
|   |-- router                   	//存放路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
.

文件名	说明
dist	存放使用npm run build打包的项目文件
node_modules	存放项目的依赖包
public	存放静态文件。里面包含了几个文件: index.html是一个模板文件
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些资源文件，比如图片、字体等资源。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件（入口文件）。
package.json	模块基本信息项目开发所需要模块，版本，项目名称
package-lock.json	是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
babel.config.js	是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
gitignore	git上传需要忽略的文件格式
vue.config.js	保存vue配置的文件，可以用于设置代理,打包配置等
README.md	项目说明

输入npm run dev命令来启动项目
运行成功后在浏览器输入：http://localhost:8080

创建vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
vue.config.js

const path = require('path');
module.exports = {
    //打包的输出路径（默认为dist）
    outputDir: 'build'
}

设置Eslint的语法检查