项目前期准备： （以Vue为例）
技术选型
1、主架构
- vue https://vuejs.org/
- 技术文档全面
- 团队技术成员都会，不需要学习成本
- 可以满足目前 DEP 项目的所有需求
- vue-cli =>v4.4.6 https://cli.vuejs.org/zh/guide/installation.html
- vue 项目脚手架工具/初始化工具
- vue-router https://router.vuejs.org/
- vue-router 是 vue.js 的官方路由管理器
- 基于 History API(IE10+)
- vuex https://vuex.vuejs.org/
- 状态管理器，主要用于组件中共享数据
- axios http://www.axios-js.com/zh-cn/docs/
- 基于 promise 的 HTTP 库，简单易用
- 支持`Promise`
- 支持全局的请求和响应拦截
- 支持取消请求
- babel-polyfill https://babeljs.io/docs/en/babel-polyfill
- ES6 语法=>es5
- 解决 promise 兼容问题(axios 基于 promise),IE 不支持 promise
- Sass/SCSS (with dart-sass) https://sass-lang.com/documentation/syntax
中文文档：https://www.sass.hk/docs/
- CSS 预处理器
- 相对 node-sass，dart-sass 性能更好，node-sass 在国内经常安装不上
- js-cookie
- 操作 cookie
- lodash
- 辅助工具函数
2、UI 框架
- vuetify https://vuetifyjs.com/zh-Hans/
3、开发工具
- git https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6
- 版本管理工具
- nodejs=>12.18.2, npm=>6.14.5，nvm=>node 版本管理工具，nrm=>node 依赖源切换工具
- 依赖安装工具
- webpack https://webpack.js.org/
- 打包工具
- webpack-dev-server https://webpack.js.org/configuration/dev-server/
- 基于 webpack 的本地服务
- vue devtools https://github.com/vuejs/vue-devtools
- 浏览器调试插件
- mocker-api https://github.com/jaywcjlove/mocker-api
- 本地数据服务，便于前端本地开发
- eslint https://cn.eslint.org/
- JS 文件静态代码检查工具/修复工具
- stylelint https://stylelint.io/
CSS 文件静态代码检查工具/修复工具,
- 标准配置
- stylelint-config-standard https://www.npmjs.com/package/stylelint-config-standard
- SCSS 配置
- stylelint-scss https://www.npmjs.com/package/stylelint-scss
- css modules 配置
- stylelint-config-css-modules
- 关闭与 prettier 冲突的相关配置
- stylelint-config-prettier https://www.npmjs.com/package/stylelint-config-prettier
* lint-staged https://www.npmjs.com/package/lint-staged
husky https://www.npmjs.com/package/husky
- 与 git 结合使用，git commit 时会检查代码是否符合 eslint/stylelint 规范，不符合则会拒绝 commit，然后提示哪些文件不符合规范
- 如果不是报错，仅是规范不对，如空格，分号，换行等。提交时会自动 fix
* prettier https://prettier.io/docs/en/options.html
check-prettier https://www.npmjs.com/package/prettier-check
- CSS/JS 代码格式工具
* http-server https://www.npmjs.com/package/http-server
- 本地静态 http 服务启动工作，用于测试打包后./dist/的文件
- zip-webpack-plugin
- 打包后压缩成 zip
4、插件库
- Vue.Draggable https://github.com/SortableJS/Vue.Draggable
- DOM 拖动库
- vue-i18n https://kazupon.github.io/vue-i18n/zh/introduction.html
- 多语言实现库
- vue-chart https://vue-chartjs.org/zh-cn/
- 图表库
- 轻量级，DEP 使用的图表不多
- storybook https://storybook.js.org/
- 暂不确定是否引入
- date-fns https://www.npmjs.com/package/date-fns
日期格式化插件，相对 comment.js 更轻量级
5、测试
- jest https://jestjs.io/
- 单元测试框架
- 团队成员比较熟悉，不需要学习成本
6、目录及文件结构
|-- .vscode vscode软件配置
| `-- settings.jsong vscode对本项目的一些配置，如配置了vetur对vue的格式化，使用prettier
|-- document 文档
|-- mocker 本地mock数据
|-- node_modules nodejs依赖
|-- public 静态模板
|-- src 源码
| |-- api API接口
| |-- assets 静态文件（图片，公共的/引入的CSS）
| |-- components 公共组件
| |-- libs 第三方库
| |-- locale 国际化
| |-- router 路由
| |-- store 状态文件
| `-- views 业务逻辑（具体页面）
|-- tests 测试
| `-- unit 单元测试
|-- ./README.md Readme
|-- ./babel.config.js babel配置
|-- ./jest.config.js Jest配置
|-- ./package-lock.json 项目依赖锁定文件
|-- ./package.json 项目依赖及配置
|-- ./.eslintrc.js eslint配置
|-- ./.gitignore git忽略配置
|-- ./.prettierrc prettier格式化配置
|-- ./.stylelintignore stylelint忽略配置
|-- ./.stylelintrc.js stylelint配置
`-- ./vue.config.js vue-cli脚手架配置入口
7、可兼容的浏览器
下面浏览器都可以正常访问本项目，体验最佳推荐 Chrome
- Chrome
- Firefox
- edge/edge chrome 版本
- safari
- opera
- Internet Explorer 11