Vue-admin工做整理（二）：项目结构我的配置

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

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

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

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

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

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

三、根目录继续建立一个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'
  }
}

四、项目结构进行调整：

另：增长一个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：模拟接口