vue-cli搭建前端开发环境指南
一、vscode编辑器配置
1、ESLint拓展安装
ESLint
- 应用商店搜索安装ESLint
- 添加保存文件时自动修复代码格式功能
// 文件->首选项->设置->在setting.json中编辑 添加代码：
"editor.codeActionsOnSave": {
"source.fixAll": true
}
- ctrl+s操作触发当前文件修复
Prettier - Code formatter
- 应用商店搜索安装Prettier - Code formatter
- 插件安装完成后，-> 配置拓展设置 prettier.requireConfig”: true
- 格式化文档操作触发
二、项目创建
1、环境准备
- Node.js 8.9 或更高版本
- Vue-Cli3
2、创建项目
- 确定项目所在目录，当前目录下打开Powershell窗口，输入指令：
vue create projectName
- 选择手动安装类型（Manually）
注：以下为初次使用本配置教程，如果已按教程配置过，可直接选择已保存的配置创建项目！
- 选择依赖需求（上下键切换，空格选择，回车确认）
- 选择是否使用history路由模式
- 选择css预处理器
- 选择格式效验方式
- 选择什么时候效验格式
- 选择测试框架
- 选择项目的配置文件放哪，这里选择第一项单独存放
- 是否保存该配置作为后续项目的可选配置，选择是，并填写配置名称，后期项目直接采用此配置
等待安装完成后，用vscode编辑器打开项目。
三、配置eslint
1、配置eslint规则
配置eslint验证规则为eslint推荐规则，eslint推荐配置官网：
"extends": [
"eslint:recommended",// 添加 eslint推荐规则
"plugin:vue/essential",
"@vue/prettier"
],
2、配置eslint批量修复指令
npm i eslint-plugin-vuefix@latest --save-dev
package.json的script添加修复指令，修改检查指令。
"lint": "eslint --ext .js,.vue src"
"fix": "eslint --ext .js,.vue src --fix"
终端运行检查指令，检测项目文件格式问题：
npm run lint
终端运行修复指令，批量修复代码格式:
npm run fix
四、配置目录结构
目录结构本着“约定优于配置”的原则，约定目录名称和嵌套结构，尽量缩小自由发挥空间！
目录结构约定优先级：
- 优先级 A：必要的
- 优先级 B：强烈推荐
- 优先级 C：推荐
- 优先级 D：可选
添加api、request、styles、utils文件夹，各文件夹使用说明如图：
├─api //（必要） 业务接口文件夹
│ └─业务功能名.js //（强烈推荐） 创建以业务功能为名称的js文件
├─assets //（必要） 静态文件目录
│ ├─icons //（强烈推荐） 字体
│ └─images //（强烈推荐） 图片
├─components //（必要） 存放公共组件
│ └─公共组件.vue
├─requests //（必要） 数据请求拦截统一配置文件夹
│ ├─index.js //（强烈推荐）数据请求拦截统一配置文件
│ └─mock.js //（可选）
├─router //（必要） 路由文件夹
│ ├─index.js //（必要） 路由总导出文件
│ └─modules //（必要） 存放业务路由文件
│ └─业务功能名.js //（强烈推荐） 导出所有业务功能路由数组
├─store //（必要） 状态管理文件夹
│ ├─getters.js //（可选） 状态复杂时，多状态统一配置文件
│ ├─index.js //（必要） 状态总导出文件
│ └─modules //（可选） 状态复杂时，分类存放状态文件
├─styles //（必要） 公共样式文件夹
│ ├─common.less //（必要） 存放公共样式，此处只约定名称，文件类型根据预处理更改
│ ├─reset.css //（必要） 样式重置文件
│ └─variable.less //（必要） 公共样式风格变量
├─utils //（必要） 公共插件文件夹
│ └─公共插件js
└─views
├─App.vue
├─main.js
└─功能名称 //（强烈推荐）按功能名称创建文件夹
└─菜单名称 //（强烈推荐）按菜单名称创建文件夹
├─components //（强烈推荐）存放依赖页面
└─Index.vue //（强烈推荐）首页
