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
  启动

• 构建完成后的结构目录

  
  结构目录