VueCLi3.0及以上版本搭建过程

一、搭建过程

在安装过node的基础之上，使用npm命令进行相关指令的安装操作

1. 第一步全局安装VueCLI
   指令：npm install -g @vue/cli或者使用yarn global add @vue/cli 安装都可以
2. 创建一个项目
   指令：vue create “这里是你自定义的项目名称” 或者使用vue ui图形化界面搭建

这里出来三个选项，分别表示你之前创建项目存储配置过的文件项、官方提供默认的脚手架、第三个可以根据个人需求自己配置，这里我们直接选第三个自己配置，出现以下选项：

Babel ：JSES6语法转换ES5
Router：路由
Vuex：全局状态管理工具
Linter：ESLint语法检测
CSS Pre-processors：CSS语法选择像less和sass、scss
这里根据个人选择点击空格选中，基本常用的就是这些选择

Babel： Babel编译
TypeScript：TypeScript支持
Progressive Web App (PWA) Support： PWA支持
Router： Vue路由
Vuex： Vue状态管理
CSS Pre-processors： CSS预编译器（包括：SCSS/Sass、Less、Stylus）
Linter / Formatter： 代码检测和格式化
Unit Testing： 单元测试
E2E Testing： 端到端测试

路由模式的选择Y选择的是H5的history历史模式，n就是hash模式#号的形式

CSS预编译器
ESLint语法检测的强弱程度根据个人和公司要求自行选择

选择何时进行代码检测
Lint on save： 在保存时进行检测
Lint and fix on commit： 在fix和commit是进行检查
选择Babel存放位置

选择是否要保存这套配置，n表示否，y回车后输入配置的名字

接下来等待下载完毕即可

下载完毕cd进入目录，输入npm run serve启动项目

二、搭建完毕，目录结构的认识

• node_modules项目所需的依赖，模块存放位置
• public共有资源

在public下面有两个文件分别是index.html单页面，整个项目唯一的页面
favicon.ico初始化项目顶部logo图片

• src平常我们要操作的文件代码主体，像路由、组件、Vuex都在这里面配置，还有App.vue根组件
  main.js入口文件
  
• .browserslistrc 设置浏览器兼容
• .eslintrc.js ESLint 配置文件
• .gitignore git项目管理文件
• package.json 包管理依赖文件
• vue.config.js 这个需要自己手动添加文件，是全局CLi的配置文件

项目搭建和目录结构基本过程就是这样