Skip to content

Commit f3da208

Browse files
author
白唯
committed
feat(项目搭建): 初步完成除了UI 库以外的基础配置
1 parent d4e8514 commit f3da208

12 files changed

+499
-29
lines changed

‎CHANGELOG.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# 0.1.0 (2020-09-03)
2+
3+
4+
### Features
5+
6+
* **基础代码架构:** 项目基础代码初始化,目前只有vue 全家桶 d4e8514
7+
8+
9+

‎package.json

+47-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
{
22
"name": "vue3",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",
77
"build": "vue-cli-service build",
88
"lint": "vue-cli-service lint",
9-
"commit": "npx cz"
9+
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
10+
"commit": "npx cz",
11+
"docs": "typedoc --out ./docs/ ./src/ && npm run serve:docs",
12+
"serve:docs": "http-server ./docs -p 3001 -o"
1013
},
1114
"dependencies": {
15+
"axios": "^0.20.0",
1216
"core-js": "^3.6.5",
1317
"vue": "^3.0.0-0",
1418
"vue-class-component": "^8.0.0-0",
@@ -39,10 +43,14 @@
3943
"eslint-plugin-promise": "^4.2.1",
4044
"eslint-plugin-standard": "^4.0.0",
4145
"eslint-plugin-vue": "^7.0.0-0",
46+
"http-server": "^0.12.3",
4247
"less": "^3.0.4",
4348
"less-loader": "^5.0.0",
4449
"prettier": "^2.1.1",
50+
"style-resources-loader": "^1.3.2",
51+
"typedoc": "^0.19.0",
4552
"typescript": "~3.9.3",
53+
"vue-cli-plugin-style-resources-loader": "~0.1.4",
4654
"vue-property-decorator": "^9.0.0",
4755
"vuex-persistedstate": "^3.1.0"
4856
},
@@ -80,16 +88,48 @@
8088
"defaultIssues": "",
8189
"types": {
8290
"feat": {
83-
"description": "新增功能",
91+
"description": "新功能",
8492
"title": "新增"
8593
},
86-
"ci": {
87-
"description": "部署相关",
88-
"title": "CI/CD"
89-
},
9094
"fix": {
9195
"description": "bug 修复",
9296
"title": "修复"
97+
},
98+
"style": {
99+
"description": "UI相关",
100+
"title": "UI"
101+
},
102+
"refactor": {
103+
"description": "代码重构",
104+
"title": "重构"
105+
},
106+
"docs": {
107+
"description": "文档更新",
108+
"title": "文档"
109+
},
110+
"build": {
111+
"description": "构建系统或者包依赖更新",
112+
"title": "构建系统或者包依赖更新"
113+
},
114+
"ci": {
115+
"description": "CI/CD,自动构建,持续集成相关",
116+
"title": "CI/CD"
117+
},
118+
"test": {
119+
"description": "测试用例相关",
120+
"title": "测试"
121+
},
122+
"perf": {
123+
"description": "优化",
124+
"title": "优化"
125+
},
126+
"chore": {
127+
"description": "非src或者测试文件的更新",
128+
"title": "非 src 或者 测试文件的更新"
129+
},
130+
"revert": {
131+
"description": "回到上一个版本",
132+
"title": "回溯"
93133
}
94134
}
95135
}

‎src/@types/app.d.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createStore } from 'vuex'
2+
declare interface Book {
3+
author?: string
4+
pageName: string
5+
}
6+
7+
declare interface StoreInstance extends ReturnType<typeof createStore> {
8+
save?: (type: string, val: any) => any
9+
get?: (type: string, val: any) => any
10+
}

‎src/App.vue

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default App
2626
-moz-osx-font-smoothing: grayscale;
2727
text-align: center;
2828
color: #2c3e50;
29+
background: @color-primary;
2930
}
3031
3132
#nav {

‎src/api/apiList.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/** 所有的网络请求地址列表,方便集中维护 */
2+
3+
import { Method, ResponseType } from 'axios'
4+
5+
interface ApiListItem {
6+
[key: string]: Array<{ url: string; method?: Method; resType?: ResponseType }>
7+
}
8+
const ApiList: ApiListItem = {
9+
user: [
10+
{
11+
url: '/login',
12+
method: 'post',
13+
resType: 'json'
14+
},
15+
{
16+
url: '/login',
17+
method: 'get',
18+
resType: 'json'
19+
}
20+
],
21+
other: [
22+
{
23+
url: 'fd'
24+
}
25+
]
26+
}
27+
28+
export default ApiList

‎src/api/axios.ts

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
2+
3+
/**
4+
* get status code
5+
* @param {AxiosResponse} response Axios response object
6+
*/
7+
const getErrorCode2text = (response: AxiosResponse) => {
8+
/** http status code */
9+
const code = response.status
10+
/** notice text */
11+
let message = 'Request Error'
12+
switch (code) {
13+
case 400:
14+
message = 'Request Error'
15+
break
16+
case 401:
17+
message = 'Unauthorized, please login'
18+
break
19+
case 403:
20+
message = 'Access denied'
21+
break
22+
case 404:
23+
message = 'Request address error'
24+
break
25+
case 408:
26+
message = 'Request timeout'
27+
break
28+
case 500:
29+
message = 'Internal server error'
30+
break
31+
case 501:
32+
message = 'Service not implemented'
33+
break
34+
case 502:
35+
message = 'Gateway error'
36+
break
37+
case 503:
38+
message = 'Service is not available'
39+
break
40+
case 504:
41+
message = 'Gateway timeout'
42+
break
43+
case 505:
44+
message = 'HTTP version is not supported'
45+
break
46+
default:
47+
}
48+
return message
49+
}
50+
51+
/**
52+
* @returns {AxiosResponse} result
53+
* @tutorial see more:https://github.com/onlyling/some-demo/tree/master/typescript-width-axios
54+
* @example
55+
* service.get<{data: string; code: number}>('/test').then(({data}) => { console.log(data.code) })
56+
*/
57+
const service = Axios.create({
58+
baseURL: process.env.VUE_APP_BASE_URL,
59+
timeout: 10000
60+
})
61+
62+
// request interceptors
63+
64+
interface ApiResponse {
65+
err_code: number
66+
err_msg?: string
67+
data?: any
68+
}
69+
70+
/**
71+
* @description 请求发起前的拦截器
72+
* @returns {AxiosRequestConfig} config
73+
*/
74+
service.interceptors.request.use(async <AxiosRequestConfig>(config: AxiosRequestConfig) => {
75+
// check network
76+
/* TODO add http headers
77+
const token = window.localStorage.getItem('token')
78+
config.headers = {
79+
...config.headers,
80+
Authorization: token
81+
} */
82+
83+
return config
84+
})
85+
86+
/**
87+
* @description 请求发起前的拦截器
88+
* @returns {} config
89+
*/
90+
service.interceptors.response.use(
91+
/** 请求有响应 */
92+
async (response: AxiosResponse) => {
93+
if (response.status === 200) {
94+
return Promise.resolve(response)
95+
} else {
96+
const __text = getErrorCode2text(response)
97+
return Promise.reject(new Error(__text))
98+
}
99+
},
100+
/** 请求无响应 */
101+
(error: AxiosError) => {
102+
let __emsg: string = error.message || ''
103+
104+
if (error.message) {
105+
__emsg = error.message
106+
}
107+
108+
if (error.response) {
109+
__emsg = error.response.data.msg
110+
}
111+
// timeout
112+
if (__emsg.indexOf('timeout') >= 0) {
113+
__emsg = 'timeout'
114+
}
115+
116+
if (error?.response?.data?.code === 401) {
117+
return Promise.reject(new Error('401'))
118+
}
119+
return Promise.reject(new Error(__emsg))
120+
}
121+
)
122+
123+
export default service

‎src/api/user.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import API from './request'
2+
interface HttpParams {
3+
coinName: string
4+
cashName: string
5+
}
6+
7+
export interface UserApi {
8+
coin2cash(param: HttpParams): Promise<any>
9+
}
10+
11+
/**
12+
* @example Axios.get(`https://api.abckey.com/market/${this.c_switchCashName}/${this.cash.toLowerCase()}&t=${new Date().getTime()}`)
13+
* @todo Get the exchange rate of the current currency
14+
*/
15+
class User {
16+
register() {
17+
/* return API.get<{ data: string | { error: string } }>(`/market/${targetCoin}/${param.cashName.toLowerCase()}`, {
18+
params: {
19+
t: new Date().getTime()
20+
}
21+
}).then(({ data }) => data) */
22+
}
23+
}
24+
25+
export default User

‎src/global.d.ts

-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
declare interface Book {
2-
author?: string
3-
pageName: string
4-
}

‎src/main.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import router from './router'
44
import store from './store'
55
import AppConfig from './config/app'
66

7+
/** 将全局静态配置注入到应用中,可以通过 this.a读取,比 provide 和 inject 手动注入更方便 */
78
const app: any = createApp(App)
89
app.config.globalProperties = AppConfig
9-
console.log('config', app.config)
10+
1011
createApp(App).use(store).use(router).mount('#app')

‎src/store/index.ts

+51-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { createStore } from 'vuex'
22
import createPersistedState from 'vuex-persistedstate'
3-
43
import mutations from './mutations'
54
import modules from './modules'
6-
export default createStore({
5+
import { StoreInstance } from '@/@types/app'
6+
7+
const store: StoreInstance = createStore({
78
strict: true,
89
state: {
910
test: 'in'
@@ -17,3 +18,51 @@ export default createStore({
1718
})
1819
]
1920
})
21+
22+
/**
23+
* @description save -方法是一个读取 state 和触发 mutaitions 的操作集合
24+
* @param {string} type - 要操作的state 的 key 值,如果是根 state,直接写key 值,如果是读取app 模块下 theme 的值,则使用 app.theme
25+
* @param {any} msg - 当有 msg 参数时,视为赋值操作,触发 mutation,msg 则为要复制的数据.
26+
* @example 以操作 raceConfigType为例,读取操作: this.$store.__s('raceConfigType'),赋值操作:this.$store.__s('raceConfigType','add'), 更改app 下模块 theme,读取操作: this.$store.__s('app.theme'),赋值操作:this.$store.__s('app.theme','light')
27+
*/
28+
store.save = (type: string, msg: any) => {
29+
let _state: any = store.state
30+
if (!type) return store.state
31+
if (type.indexOf('.') === -1) {
32+
if (msg !== undefined) {
33+
store.commit({
34+
type: '__set',
35+
key: type,
36+
val: msg,
37+
root: true
38+
})
39+
return _state
40+
} else {
41+
return _state[type]
42+
}
43+
}
44+
const _path = type.split('.')
45+
for (let i = 0; i < _path.length; i++) {
46+
if (_state[_path[i]] !== undefined) {
47+
_state = _state[_path[i]]
48+
} else {
49+
_state = undefined
50+
}
51+
}
52+
if (msg !== undefined && _path.length === 2) {
53+
store.commit({
54+
type: _path[0] + '/__set',
55+
key: _path[1],
56+
val: msg
57+
})
58+
}
59+
return _state
60+
}
61+
62+
/** 读取getter 的操作 */
63+
store.get = (type: string): any => {
64+
if (!type) return store.getters
65+
return store.getters[type]
66+
}
67+
68+
export default store

0 commit comments

Comments
 (0)