Vue开发之项目创建
1.编辑器配置
习惯使用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':'/'
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'
}
}
