项目初期准备（一）

项目前期准备： （以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/

 

-ant-design-vue https://vue.ant.design/

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