本文已参与「新人创作礼」活动，一起开启掘金创作之路。
项目标准目录结构说明，依赖组件说明
目录结构
├── build # 构建相关
├── mock # 项目mock 模拟数据
├── plop-templates # 基本模板
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── jest.config.js #
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置（是一个用JavaScript工具和插件转换CSS代码的工具）
└── package.json # package.json
dependencies
- nprocess：网页顶部进度条
- clipboard：实现复制功能
- axios：一个基于promise的HTTP库
- CodeMirror：是一个JavaScript库，基于浏览器的代码着色编辑工具
- driver.js：页面分步引导
- dropzone：拖动上传文件
- echarts：图表展示
- element-ui：基于Vue2.0的桌面端组件库
- file-saver：导出数据到excel
- fuse.js：轻量级模糊搜索引擎
- js-cookie：允许你向cookie中存储json信息
- jsonlint：验证JSON
- jszip：用JavaScript创建、读取和编辑.zip文件
- normalize.css：是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性
- path-to-regexp：用来处理 url 中地址与参数，能够很方便得到我们想要的数据
- screenfull：实现浏览器全屏
- showdown：markdown转换为html
- sortablejs：拖拽排序及置顶
- tui-editor：markdown编辑器
- vue：构件用户界面的渐进式框架
- vue-count-to：数字滚动插件
- vue-i18n：vue项目实现国际化
- vue-router：vue.js官方路由管理器
- vue-splitpane：分割面板，对窗口进行拆分
- vuedraggable：拖拽排序
- vuex：vue状态管理
- xlsx：excel数据解析器和编写器
- node-xlsx：xlsx文件读取与生成
- compression：node中间件-文件压缩
- body-parser：node中间件-HTTP请求体解析
- querystring：查询字符串，一般是对http请求所带的数据进行解析
- request：Simplified HTTP request client.
- ctrip-apollo：携程Apollo配置管理服务客户端
- connect：nodejs高性能中间件框架，在Connect中，中间件组件是一个函数，它拦截HTTP服务器提供的请求和响应，执行逻辑，然后，或者结束响应。Express构建在Connect之上的更高层的框架
- connect-history-api-fallback：Middleware to proxy requests through a specified index page, useful for Single Page Applications that utilise the HTML5 History API.
- connect-redis：Redis session store for Connect
- cookie-parser：Parse HTTP request cookies
- express：快速、独立、极简的web框架
- express-session：Simple session middleware for Express
- glob：使用shell使用的pattern匹配文件
- linq：对前端集合变量进行操作的一种技术框架
- moment：用于解析、验证、操作和格式化日期的轻量级JavaScript日期库。
- serve-favicon：提供网页图标
- log4js：日志管理
- uuid：Simple, fast generation of RFC4122 UUIDS.
- multer：Middleware for handling
multipart/form-data. - emojis-list：表情插件
- better-scroll：是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件
- vue-lazyload：图像延迟加载
- ant-design-vue：Ant Design的Vue实现，开发和服务于企业级后台产品
- http-proxy-middleware：Nodejs代理中间件，用于把请求代理转发到其他服务器的中间件
devDependencies:
- babel：原始代码 --> [Babel Plugin] --> 转换后的代码
- esLint：语法规则和代码风格的检查工具
- eslint-plugin-vue：Official ESLint plugin for Vue.js
- autoprefixer：一个CSS后处理程序,能够自动添加CSS前缀,自动补全CSS3前缀,
- chalk：终端字符串颜色美化
- chokidar：监听文件变化
- webpack：模块打包器
- webpack-cli：交互式的项目脚手架
- webpack-dev-server：是一个用来快速搭建本地运行环境的工具
- clean-webpack-plugin：
- copy-webpack-plugin：
- image-webpack-loader：
- html-webpack-plugin：webpack插件，用来简化创建服务于webpack bundle的HTML文件
- script-ext-html-webpack-plugin：增强html-webpack-plugin功能，为您的脚本提供不同的部署选项。让js加载方式支持Async或defer
- husky：git hooks防止错误的提交或推送
- prettier：强大的代码格式化工具，目的是统一团队的代码格式。相对于 ESlint 代码检查能力较弱
- lint:代码风格检查
- lint-staged：前端文件过滤工具。配合Prettier、Husky、commintint、eslint等构建代码检查工作流
- mockjs：生成随机数据&拦截Ajax请求
- node-sass：Node-sass is a library that provides binding for Node.js to LibSass。sass（Syntactically Awesome Stylesheets）层叠样式表语言
- plop：代码生成器框架
- runjs：在线JS编辑器，在线运行调试
- sass-loader：加载一个Sass/SCSS文件并将其编译为CSS
- script-loader：Script loader module for webpack
- css-loader：
- ejs-loader：
- babel-loader：
- style-loader：
- url-loader：
- vue-loader：
- svg-sprite-loader：Webpack loader for creating SVG sprites。将加载的svg图片拼接成雪碧图
- serve-static：实现静态资源处理服务器
- svgo：svg精简压缩工具
- vue-template-compiler：Template compiler for Vue 2.0
