前端vue架构目录解析

front-end-Doc

前端文档汇总（含代码规范、开发流程、知识分享等）

1. 这里的文档很重要，

2. 你可以在这里看到前端相关代码规范、开发规范、开发流程等，

3. 如果你是新人，务必看完，

4. 如果你是老员工，务必按这里的约定执行。

目录结构

本项目提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── build // 构建相关

├── config // 配置相关

├── src // 源代码

│ ├── api // 所有请求

│ ├── assets // 主题 字体等静态资源

│ ├── components // 全局公用组件

│ ├── directive // 全局指令

│ ├── filters // 全局 filter

│ ├── icons // 项目所有 svg icons

│ ├── lang // 国际化 language

│ ├── mock // 项目mock 模拟数据

│ ├── router // 路由

│ ├── store // 全局 store管理

│ ├── styles // 全局样式

│ ├── utils // 全局公用方法

│ ├── vendor // 公用vendor

│ ├── views // view

│ ├── App.vue // 入口页面

│ ├── main.js // 入口 加载组件 初始化等

│ └── permission.js // 权限管理

├── static // 第三方不打包资源

│ └── Tinymce // 富文本

├── .babelrc // babel-loader 配置

├── eslintrc.js // eslint 配置项

├── .gitignore // git 忽略项

├── favicon.ico // favicon图标

├── index.html // html模板

└── package.json // package.json

安装

1.# install dependencies

  npm install

2.# serve with hot reload at localhost:3000

 npm run dev

3.# build for production with minification

 npm run build

技术选型

• 核心框架：Vue
• 状态管理：Vuex
• 路由映射：vue-router
• UI组件库：Muse-UI,Element
• HTTP请求库：axios
• CSS的预处理框架: Stylus,中文文档
• 资源加载打包工具：Webpack
• 代码规范工具：eslint
• 单元测试 vue-test-utils
• 其他：ES6,node.js,npm

代码规范

• HTML规范
• CSS规范
• JS规范一（语法&格式篇）
• JS规范二（base）

前后端接口规范

• JSON-API

文件命名规范

• 文件命名规范