习惯使用VScode进行开发时，可以安装EditorConfig for Visual Studio Code插件，然后在项目中新建.editorconfig文件，来配置编辑器的使用习惯
.editorconfig文件内容
root = true # 是否是顶级配置文件，设置为true的时候才会停止搜索.editorconfig文件 [*] # 匹配除/之外的任意字符，表示对所有的文件都使用下面的配置 charset=utf-8 # 使用UTF-8编码 indent_style = tabs # 缩进方式为Tab键 indent_size = 4 # 缩进大小为4个空格 trim_trailing_whitespace = true # 让文件以空行结束 insert_final_newline = true # 删除行尾空格具体配置可以参考editorconfig官网
2.开发时通用的项目目录 . ├── babel.config.js # babel配置文件 ├── package.json # 定义项目的一些描述，比如项目名，版本，项目依赖包以及开发依赖包 ├── package-lock.json ├── eslintrc.js # eslint规则配置文件，比如想自定义一些规则时，则在此文件的rules字段中定义 ├── vue.config.js # vue的配置文件 ├── .editorconfig # 配置编辑器的使用习惯 ├── postcss.config.js # CSS自动补充一些兼容性代码的配置 ├── public # 公共文件存放目录 │ ├── favicon.ico # 在浏览器上看到的小图标 │ └── index.html # 模板文件，webpack在运行和打包时用这个文件来生成项目最后的index.html ├── README.md ├── src # 项目的主文件，平时都是在这个文件夹下进行开发 │ ├── api # 接口目录，发送js请求的接口都可以保存在这个目录下 │ ├── App.vue # 基础组件 │ ├── assets # 项目静态资源存放目录，比如图片，图标，字体等都放在这个目录下 │ │ ├── font │ │ ├── img │ │ └── logo.png │ ├── components # 组件存放目录，把代码中一些可以复用的逻辑抽离出来保存在这个目录下 │ │ └── HelloWorld.vue │ ├── config # 项目的配置文件存放目录 │ │ └── index.js │ ├── directive # Vue自定义的指令 │ │ └── index.js │ ├── lib # 存放一些通用的工具和方法 │ │ ├── tools.js # 存放与业务有关系的方法 │ │ └── util.js # 存放与业务无关的工具方法 │ ├── main.js │ ├── mock # 模拟接口的数据 │ │ └── index.js │ ├── router # 存放所有的路由，包括一些复杂的路由拦截方法 │ │ ├── index.js │ │ └── router.js │ ├── store │ │ ├── actions.js │ │ ├── index.js │ │ ├── module │ │ │ └── user.js │ │ ├── mutations.js │ │ └── state.js │ └── views # 视图文件存放目录，项目开发中的页面都保存在这个文件夹下 │ ├── About.vue │ └── Home.vue └── vue.config.js 3.vue.config.js中的一些配置 const path = require('path') const resolve = dir => path.join(__dirname,dir) const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin':'http://www.likecs.com/' module.exports = { lintOnSave: false, baseUrl: BASE_URL, chainWebpack:config =>{ config.resolve.alias .set('@',resolve('src')) // 用 @ 符号来替代 src 这个路径 .set('_c',resolve('src/components')) // 用 _c 来替代 src/components这个目录 }, productionSourceMap:false, // 打包时不生成 .map文件，减少打包的体积同时加快打包速度 devServer:{ // 跨域配置，告诉开发服务器将任何没有匹配到静态文件的请求都代理到proxy指定的URL proxy:'http://localhost:8000' } }