1.配置NODE环境

首先查看电脑是否已经安装了node环境
win+r=>cmd 进入命令面板

npm -v//查看npm版本
node -v//查看node版本

node版本查看
笔者这里用了比较新的版本，实际开发中并不推荐使用很新的版本
因为新版本意味着新的没人踩过的坑
推荐使用10.0左右的node版本，node官网

更换npm源
因为默认源在个国外，这会导致下载某些包非常的慢

npm config set registry https://registry.npm.taobao.org

查看设置过的所有的源

npm config get registry

2.安装vue-cli3.0

首先查看电脑是否已经安装了vue-cli
命令行输入如下代码

vue -V//查看vue-cli版本

vuecli版本查看

安装vue-cli3.0
命令行输入如下代码，进行全局安装
需要跟上版本号，因为笔者这个时间，默认安装的会是是最新的4.0

npm i -g vue/cli@3.2.1

3.创建vue-cli3.0项目

进入要创建项目的文件夹打开当前文件夹的命令行
使用idea或者在文件夹右键的方式均可
创建项目
注意：项目名不能用大写字母所以不可以使用驼峰命名方式

vue create my-project

项目配置
选择最后一项 Manually select features 意思是手动配置
前两项是笔者原来生成项目时将配置进行了保存下面会提到
选择配置方式
使用空格键选择如下配置
Babel编译Babel一个广泛使用的转码器，可以将ES6代码转为ES5代码
TypeScriptTypeScript一种给 JavaScript 添加特性的语言扩展
PWAProgressive Web App (PWA) SupportPWAGoogle 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案
vue路由Router
vue状态管理器Vuex
css编译器CSS Pre-processors
代码检测和格式化Linter / Formatter
单元测试Unit Testing
端到端测试E2E Testing
定制细节
是否开启路由器'history'模式
笔者选择了y
项目里可以进行调整

路由器模式
css编译方式
笔者选择了scss

css编译模式
选择ESLint的代码规范
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具
[图片上传中...(9.png-502f4a-1592969535308-0)]
它的目标是保证代码的一致性和避免错误
笔者选择了第一项不过ESLint + Prettier 使用较多
ESLint 检测模式
选择何时进行代码检测
一般都选第一项
保存时检测

选择何时进行代码检测
单元测试的方式
Mocha + Chai只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
选择第二项
单元测试的方式
选择 Babel、PostCSS、ESLint等配置文件存放位置
选择第一项各自单独存放

配置文件存放位置
是否保存为常用配置
选择保存并给自己的配置起一个名字
下次使用的时候可以直接选择配置
不用这样一步一步的选

是否保存配置
启动项目
进入项目文件夹 cd my-project
启动npm run serve
启动
构建完成后的结构目录

结构目录