|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- # 版本
- 中药制剂服务平台,对应管理端(specialist-admin)的v7.7.0
-
- # 文件夹目录
- ```
- .
- ├── README.md readme
- ├── babel.config.js babel配置
- ├── package-lock.json 锁文件,使用npm,不使用yarn
- ├── package.json 项目依赖文件
- ├── public public
- │ ├── favicon.ico
- │ └── index.html
- ├── src 资源文件
- │ ├── App.vue App.vue
- │ ├── api api文件,放所有的网络请求封装
- │ │ ├── index.js
- │ │ └── readme.md
- │ ├── assets 资源文件,放置文件夹配置
- │ │ └── logo.png
- │ ├── components 全局组件,要求文件名/组件名均使用kebab-case命名
- │ │ └── readme.md
- │ ├── filters 全局过滤器文件,只需要写过滤器并导出即可
- │ │ ├── index.js
- │ │ └── readme.md
- │ ├── layout 路由布局组件,预置一个empty组件,基于业务自行添加
- │ │ ├── components
- │ │ │ ├── szyx-empty
- │ │ │ │ ├── logic.js
- │ │ │ │ └── szyx-empty.vue
- │ │ └── readme.md
- │ ├── main.js 主入口
- │ ├── router 路由组件
- │ │ ├── index.js
- │ │ ├── modules
- │ │ │ └── errorRouter.js
- │ │ └── readme.md
- │ ├── store vuex的store
- │ │ ├── getters.js getters相关
- │ │ ├── index.js 主页面
- │ │ ├── modules 分包store
- │ │ │ └── exampleStore.js
- │ │ └── readme.md
- │ ├── styles 全局style相关
- │ │ ├── element-ui.less 全局的element-ui样式变更
- │ │ ├── index.less 统一出口
- │ │ ├── pallet.less 全局色板变量
- │ │ └── readme.md
- │ ├── utils 工具类
- │ │ ├── errorHandle.js 全局错误日志(异步型错误捕获不到)
- │ │ ├── readme.md
- │ │ └── routeHooks.js 路由钩子
- │ └── views 页面相关
- │ ├── error-pages
- │ │ ├── 404.vue
- │ │ └── logic.js
- │ ├── home
- │ │ ├── index.vue
- │ │ └── logic.js
- │ ├── readme.md
- │ └── redirect
- │ └── index.vue
- └── vue.config.js webpack打包配置
- ```
- # 风格要求
- .vue文件:(除App.vue)均使用kebab-case风格
- .js文件:使用小驼峰风格
-
- .vue文件中,只包含template与css,js需单独拆分出来
- 目的是单文件不超过250行.
-
- # 配置相关
- ## vuex
-
- 所有分包store写入
-
- /store/modules
-
- 文件夹下
-
- index中引入了所有store,并且要求sotre中需要开始命名空间隔离
-
- 调用action的时候,需要加上文件名做前缀
-
- 例如:
- ```
- exampleStore中的action:increment
- 使用时,调用为
- store.dispatch('exampleStore/increment')
- ```
-
- ## css相关
- 使用less预处理框架
- ├── element-ui.less 全局的element-ui样式变更
- ├── index.less 统一出口
- ├── pallet.less 全局色板变量
-
- 颜色要求设计提供相应所有颜色,项目中使用到的颜色均使用pallet提供的色板变量
-
- 相同的大批量css样式建议考虑[mixins](http://lesscss.cn/features/#mixins-feature)
-
- ## router
- layout中包含的是页面样式的布局,举个🌰
- ```
- 是包含顶部header和页面相关的布局
-
- 还是包含左边侧边栏,右边页面相关的布局
- ```
- 这些页面样式都属于布局类,可以结合component在此处融合.
-
- 默认提供一个空布局(就是啥也没有)
-
- 路由钩子见utils中的routeHooks,一般的路由鉴权过程如下,需要自行添加
-
- ![图1](./src/assets/routeHooks.jpg)
-
- 动态路由使用[addRouter](https://router.vuejs.org/zh/api/#router-addroutes)
-
- ## utils
-
- 放置大量的工具类
-
- ## 一些配置
-
- .eslintrc:eslint相关配置写在了
-
- .vscode:其中放了一些代码块,使用vscode开发的同学可以使用如下快捷方式
- ```
- clg
- vue
- jsexport
- storeexport
- ```
- .vue.config.js:放置了webpack打包相关配置等
-
- 开发的proxy也在其中,放开注释修改目标地址即可使用
-
- ## vue实例上默认挂载
- $API => 指向api中的index
- $dayjs => 指向dayjs
- $throw => 指向errorHandler
-
- ## window默认挂载
- dayjs
|