Vue-admin工作整理（二）：项目结构个人配置

通过上一篇文章（Vue-admin工作整理（一）：项目搭建）操作完毕后，基础项目已经搭建，下面就要对项目本身进行一下项目结构调整来符合自己的项目要求

1、首先要对package.json文件进行调整，使项目初始化后浏览器要自动弹出，在原有的配置下，增加 --open

"serve": "vue-cli-service serve --open",

2、根目录中增加一个.editorconfig配置文件，用来配置一些编译器的使用习惯

root = true  // root权限生效
[*]  // 对所有文件都有效
charset = utf-8 // 文件编码
indent_style = tabs // 缩进快捷键
indent_size = 2 // 缩进字符数

单单这么创建配置文件是不生效的，需要在vscode编译器中增加插件：EditorConfig for VS Code，安装完插件后重启编译器，配置就会生效

3、根目录继续创建一个vue.config.js配置文件，用以解决日常工作中的文件路径，项目默认的URL等，并且增加一个跨域配置，通过proxy告诉后端，所有没有静态资源的请求，全部代理到指定路由上

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const BASE_URL = process.env.NODE_ENV === 'procution' ? '/iTestWeb' : '/'
module.exports = {
  lintOnSave: true,
  baseUrl: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
  },
  // 打包时不生成.map文件，来减少打包生的文件大小
  // procutionSourceMap: false,
  // 增加跨域配置，通过proxy告诉后端，所有没有静态资源的请求，全部代理到localhost：8080上
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

4、项目结构进行调整：

另：增加一个npm i mockjs -D , mock模拟服务端返回的工具

文件夹说明：

• api：所有后端接口交互的ajax请求放在这里
• assets：资源归类，分为了图片和字体等
• config：项目的一些配置放在这里
• directive：放置vue的自定义指令
• lib->utils.js：与业务结合的方法，放置在这里
• lib->tool.js：与业务没有耦合的，纯粹的工具方法函数放置在这里
• router：路由文件的剥离，index.js中创建路由实例和全局路由守卫，router.js中创建路由列表
• store(Vuex)：状态管理放置在这里，项目最基础的状态都独立拆出文件放置：actions.js、mutations.js、state.js，随着业务的复杂，可以将模块独立出来，比如用户相关的（用户名、用户信息等）状态管理，我们放置在user.js
• components：组件管理
• views：视图管理
• mock：模拟接口