前端vue架构目录解析

front-end-Doc

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

这里的文档很重要，
你可以在这里看到前端相关代码规范、开发规范、开发流程等，
如果你是新人，务必看完，
如果你是老员工，务必按这里的约定执行。

目录结构

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

├── 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

安装

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run dev

# 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

文件命名规范

• 文件命名规范