Skip to content

Commit 366d49c

Browse files
author
白唯
committed
feat(layout 编写): 完成 layout 编写,实现全屏切换方式
1 parent 8da40d1 commit 366d49c

File tree

9 files changed

+841
-741
lines changed

9 files changed

+841
-741
lines changed

‎README.md

Lines changed: 185 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,185 @@
1-
# 项目基础代码架构说明
2-
3-
#### 主要用到的库
4-
5-
- vue 全家桶 vue3 + vue-router + vuex + typescript
6-
- http 请求:axios
7-
- ui 库:ant-design-vue.
8-
- 提交规范:git cz commitizen
9-
- 版本更改历史: changelog
10-
- 文档工具:typedoc
11-
- 代码检查:eslint+eslint-typescript,格式化:prettier.
12-
- 测试用例:mocha,ts-node
13-
- webpack 插件:style-resources-loader
14-
15-
#### 代码基础架构说明
16-
17-
```
18-
|-- 根目录
19-
|-- @types 项目共用的 type
20-
|-- dist 项目 build 之后的文件夹
21-
|-- docs 文档生成的根目录位置
22-
|-- public 项目静态资源，不经过 webpack，以及默认的模版，适合存放第三方压缩好的资源
23-
|-- src 主要的开发目录
24-
| |-- App.vue 页面渲染根节点
25-
| |-- main.ts 入口文件
26-
| |-- shims-vue.d.ts vue 文件类型的 type
27-
| |-- api http 请求相关
28-
| | |-- apiList.ts api 接口列表
29-
| | |-- axios.ts 业务请求封装
30-
| | |-- editor.ts 其他业务封装
31-
| | |-- user.ts api 请求模块
32-
| |-- assets 存放静态资源，这个文件夹下的文件会走 webpack 压缩流程
33-
| |-- components
34-
| | |-- index.ts 自动注册脚本
35-
| | |-- global 自动注册的全局组件
36-
| | |-- ...其他非全局注册的模块
37-
| |-- config 全局静态配置，不可更改项
38-
| |-- layout 页面页面骨架
39-
| |-- plugins 存放第三方插件
40-
| | |-- index.ts 插件挂载入口
41-
| |-- router 路由
42-
| | |-- index.ts 路由入口
43-
| |-- store vuex
44-
| | |-- modules 多个模块
45-
| | |-- index.ts 自动装载模块
46-
| | |-- app app 模块
47-
| |-- styles 全局样式，一句 ui 库主题样式
48-
| | |-- \_variables.less
49-
| | |-- test.less
50-
| |-- utils 常用函数以及其他有用工具
51-
| | |-- common.ts
52-
| |-- views 页面级组件
53-
| |-- Home.vue 正常页面
54-
| |-- test 组件测试页面
55-
| |-- Test.vue
56-
|-- tests 测试用例
57-
|-- api api 模块
58-
|-- unit 单元测试
59-
|-- .czrc 提交规范选项设置
60-
|-- .editorconfig vscode 编辑器 设置
61-
|-- .env.development 开发环境配置
62-
|-- .env.preview 测试环境配置
63-
|-- .env.production 生产环境配置
64-
|-- .eslintignore eslint 要忽略的文件夹
65-
|-- .eslintrc.js eslint 规则配置
66-
|-- .gitattributes github 语言选项设置
67-
|-- .gitignore git 忽略的文件
68-
|-- .gitlab-ci.yml gitlab CI/CD 配置
69-
|-- .prettierrc.js 格式化插件配置
70-
|-- CHANGELOG.md 版本更改说明
71-
|-- Dockerfile 如果需要容器部署
72-
|-- README.md 项目说明
73-
|-- babel.config.js babel 设置
74-
|-- global.d.ts 全局的 type
75-
|-- package.json npm 配置
76-
|-- tsconfig.json typescript 配置
77-
|-- typedoc.json 文档配置文件
78-
|-- vue.config.js vue-cli 脚手架配置文件
79-
```
80-
81-
#### 组件编写
82-
83-
- [x] 支持 tsx 方式编写页面,在.tsx 文件或者 class-component 里写 tsx.
84-
- [x] 支持 class-component 写法.
85-
- [x] 同时支持(.vue|.tsx.|.ts) 编写页面,defineComponent 以及 class-componnet 都支持智能提示.
86-
87-
#### 样式配置
88-
89-
> 均通过在 vue-cli 中配置 webpack 实现.
90-
91-
- [x] 自动注入全局样式
92-
- [x] 配置全局 less 变量
93-
- [x] 支持自定义 UI 库的主题颜色
94-
95-
#### 网络请求
96-
97-
- [x] 基于 axios 封装脱离具体业务逻辑的网络请求,支持编写脱离浏览器环境的测试用例.(跟业务无关)
98-
- [ ] 基于具体业务逻辑再次封装网络请求 (跟业务相关,此项需要依据具体后台应用接口编写)
99-
100-
#### 数据状态管理
101-
102-
- [x] 建立应用数据状态管理
103-
- [x] 编写更加建议读取的方法,并完善 type
104-
- [x] 支持多个模块,以及自动装载模块
105-
- [x] 支持持久化
106-
107-
#### UI 库
108-
109-
- [x] 添加 ant-design-vue,支持组件按需加载
110-
- [x] 将 UI 库部分功能如 message 添加到每个组件实例
111-
112-
#### 插件与常用工具函数
113-
114-
- [x] 引用常用工具函数
115-
- [x] 常用 hook
116-
117-
#### 配置
118-
119-
- [x] 配置 webpack,分离开发/测试/生产环境配置.
120-
- [x] 添加 webpack 常用插件,优化打包配置.
121-
- [x] 根据环境配置 vue-cli 环境变量(环境相关)
122-
- [x] 配置应用全局静态常量(业务相关)
123-
- [x] 完成 tsconfig 相关配置
124-
- [x] 增加编辑器配置
125-
126-
#### 开发工具
127-
128-
- [x] eslint 代码检查,配置 prettier 格式化工具,使检查规则和格式化规则一致
129-
- [x] 新增提交规范 git cz commitizen,统一代码提交规范
130-
- [x] 为没有 type 的库和变量添加 shims
131-
132-
#### CI/CD
133-
134-
- [x] 配置自动构建/持续集成配置文件(与部署相关,需结合到具体项目部署情况)
135-
136-
#### 文档
137-
138-
- [x] 使用 TYPEDOC 搭建项目文档应用
139-
- [x] 在提交规范的基础上,增加版本更改历史,自动生成 changelog
140-
- [x] 配置 http-server 启动文档应用
141-
142-
#### 测试用例
143-
144-
- [x] 支持编写 js,ts 的测试用例
145-
146-
## 安装依赖
147-
148-
```
149-
yarn install
150-
npm install
151-
```
152-
153-
### 开发模式
154-
155-
```
156-
yarn serve
157-
npm run serve
158-
```
159-
160-
### 生产环境
161-
162-
```
163-
yarn build
164-
npm run build
165-
```
166-
167-
### 测试用例
168-
169-
- api 模块开发环境下单元测试
170-
171-
```
172-
npm run test-dev:api
173-
```
174-
175-
- api 模块常规单元测试
176-
177-
```
178-
npm run test:api
179-
```
180-
181-
### 更多问题
182-
183-
如果有问题，请提 issue 说明 => [传送门](https://github.com/ibwei/vue3-base).
1+
# 项目基础代码架构说明
2+
3+
- <font color="red">目前暂时还未完成 vuex 的类型编写</font>
4+
5+
#### 主要用到的库
6+
7+
- vue 全家桶 vue3 + vue-router + vuex + typescript
8+
- http 请求:axios
9+
- ui 库:ant-design-vue.
10+
- 提交规范:git cz commitizen
11+
- 版本更改历史: changelog
12+
- 文档工具:typedoc
13+
- 代码检查:eslint+eslint-typescript,格式化:prettier.
14+
- 测试用例:mocha,ts-node
15+
- webpack 插件:style-resources-loader
16+
17+
#### 代码基础架构说明
18+
19+
```
20+
|-- 根目录
21+
|-- @types 项目共用的 type
22+
|-- dist 项目 build 之后的文件夹
23+
|-- docs 文档生成的根目录位置
24+
|-- public 项目静态资源，不经过 webpack，以及默认的模版，适合存放第三方压缩好的资源
25+
|-- src 主要的开发目录
26+
| |-- App.vue 页面渲染根节点
27+
| |-- main.ts 入口文件
28+
| |-- shims-vue.d.ts vue 文件类型的 type
29+
| |-- api http 请求相关
30+
| | |-- apiList.ts api 接口列表
31+
| | |-- axios.ts 业务请求封装
32+
| | |-- editor.ts 其他业务封装
33+
| | |-- user.ts api 请求模块
34+
| |-- assets 存放静态资源，这个文件夹下的文件会走 webpack 压缩流程
35+
| |-- components
36+
| | |-- index.ts 自动注册脚本
37+
| | |-- global 自动注册的全局组件
38+
| | |-- ...其他非全局注册的模块
39+
| |-- config 全局静态配置，不可更改项
40+
| |-- layout 页面页面骨架
41+
| |-- plugins 存放第三方插件
42+
| | |-- index.ts 插件挂载入口
43+
| |-- router 路由
44+
| | |-- index.ts 路由入口
45+
| |-- store vuex
46+
| | |-- modules 多个模块
47+
| | |-- index.ts 自动装载模块
48+
| | |-- app app 模块
49+
| |-- styles 全局样式，一句 ui 库主题样式
50+
| | |-- \_variables.less
51+
| | |-- test.less
52+
| |-- utils 常用函数以及其他有用工具
53+
| | |-- common.ts
54+
| |-- views 页面级组件
55+
| |-- Home.vue 正常页面
56+
| |-- test 组件测试页面
57+
| |-- Test.vue
58+
|-- tests 测试用例
59+
|-- api api 模块
60+
|-- unit 单元测试
61+
|-- .czrc 提交规范选项设置
62+
|-- .editorconfig vscode 编辑器 设置
63+
|-- .env.development 开发环境配置
64+
|-- .env.preview 测试环境配置
65+
|-- .env.production 生产环境配置
66+
|-- .eslintignore eslint 要忽略的文件夹
67+
|-- .eslintrc.js eslint 规则配置
68+
|-- .gitattributes github 语言选项设置
69+
|-- .gitignore git 忽略的文件
70+
|-- .gitlab-ci.yml gitlab CI/CD 配置
71+
|-- .prettierrc.js 格式化插件配置
72+
|-- CHANGELOG.md 版本更改说明
73+
|-- Dockerfile 如果需要容器部署
74+
|-- README.md 项目说明
75+
|-- babel.config.js babel 设置
76+
|-- global.d.ts 全局的 type
77+
|-- package.json npm 配置
78+
|-- tsconfig.json typescript 配置
79+
|-- typedoc.json 文档配置文件
80+
|-- vue.config.js vue-cli 脚手架配置文件
81+
```
82+
83+
#### 组件编写
84+
85+
- [x] 支持 tsx 方式编写页面,在.tsx 文件或者 class-component 里写 tsx.
86+
- [x] 支持 class-component 写法.
87+
- [x] 同时支持(.vue|.tsx.|.ts) 编写页面,defineComponent 以及 class-componnet 都支持智能提示.
88+
89+
#### 样式配置
90+
91+
> 均通过在 vue-cli 中配置 webpack 实现.
92+
93+
- [x] 自动注入全局样式
94+
- [x] 配置全局 less 变量
95+
- [x] 支持自定义 UI 库的主题颜色
96+
97+
#### 网络请求
98+
99+
- [x] 基于 axios 封装脱离具体业务逻辑的网络请求,支持编写脱离浏览器环境的测试用例.(跟业务无关)
100+
- [ ] 基于具体业务逻辑再次封装网络请求 (跟业务相关,此项需要依据具体后台应用接口编写)
101+
102+
#### 数据状态管理
103+
104+
- [x] 建立应用数据状态管理
105+
- [x] 编写更加建议读取的方法,并完善 type
106+
- [x] 支持多个模块,以及自动装载模块
107+
- [x] 支持持久化
108+
109+
#### UI 库
110+
111+
- [x] 添加 ant-design-vue,支持组件按需加载
112+
- [x] 将 UI 库部分功能如 message 添加到每个组件实例
113+
114+
#### 插件与常用工具函数
115+
116+
- [x] 引用常用工具函数
117+
- [x] 常用 hook
118+
119+
#### 配置
120+
121+
- [x] 配置 webpack,分离开发/测试/生产环境配置.
122+
- [x] 添加 webpack 常用插件,优化打包配置.
123+
- [x] 根据环境配置 vue-cli 环境变量(环境相关)
124+
- [x] 配置应用全局静态常量(业务相关)
125+
- [x] 完成 tsconfig 相关配置
126+
- [x] 增加编辑器配置
127+
128+
#### 开发工具
129+
130+
- [x] eslint 代码检查,配置 prettier 格式化工具,使检查规则和格式化规则一致
131+
- [x] 新增提交规范 git cz commitizen,统一代码提交规范
132+
- [x] 为没有 type 的库和变量添加 shims
133+
134+
#### CI/CD
135+
136+
- [x] 配置自动构建/持续集成配置文件(与部署相关,需结合到具体项目部署情况)
137+
138+
#### 文档
139+
140+
- [x] 使用 TYPEDOC 搭建项目文档应用
141+
- [x] 在提交规范的基础上,增加版本更改历史,自动生成 changelog
142+
- [x] 配置 http-server 启动文档应用
143+
144+
#### 测试用例
145+
146+
- [x] 支持编写 js,ts 的测试用例
147+
148+
## 安装依赖
149+
150+
```
151+
yarn install
152+
npm install
153+
```
154+
155+
### 开发模式
156+
157+
```
158+
yarn serve
159+
npm run serve
160+
```
161+
162+
### 生产环境
163+
164+
```
165+
yarn build
166+
npm run build
167+
```
168+
169+
### 测试用例
170+
171+
- api 模块开发环境下单元测试
172+
173+
```
174+
npm run test-dev:api
175+
```
176+
177+
- api 模块常规单元测试
178+
179+
```
180+
npm run test:api
181+
```
182+
183+
### 更多问题
184+
185+
如果有问题，请提 issue 说明 => [传送门](https://github.com/ibwei/vue3-base).

0 commit comments

Comments
 (0)