feat(项目搭建): 初步完成除了UI 库以外的基础配置

CHANGELOG.md

@@ -0,0 +1,9 @@
+# 0.1.0 (2020-09-03)
+
+
+### Features
+
+* **基础代码架构:** 项目基础代码初始化,目前只有vue 全家桶 d4e8514
+
+
+

package.json

@@ -1,14 +1,18 @@
 {
   "name": "vue3",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "commit": "npx cz"
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "commit": "npx cz",
+    "docs": "typedoc --out ./docs/ ./src/ && npm run serve:docs",
+    "serve:docs": "http-server ./docs -p 3001 -o"
   },
   "dependencies": {
+    "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0-0",
     "vue-class-component": "^8.0.0-0",
@@ -39,10 +43,14 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^7.0.0-0",
+    "http-server": "^0.12.3",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "prettier": "^2.1.1",
+    "style-resources-loader": "^1.3.2",
+    "typedoc": "^0.19.0",
     "typescript": "~3.9.3",
+    "vue-cli-plugin-style-resources-loader": "~0.1.4",
     "vue-property-decorator": "^9.0.0",
     "vuex-persistedstate": "^3.1.0"
   },
@@ -80,16 +88,48 @@
       "defaultIssues": "",
       "types": {
         "feat": {
-          "description": "新增功能",
+          "description": "新功能",
           "title": "新增"
         },
-        "ci": {
-          "description": "部署相关",
-          "title": "CI/CD"
-        },
         "fix": {
           "description": "bug 修复",
           "title": "修复"
+        },
+        "style": {
+          "description": "UI相关",
+          "title": "UI"
+        },
+        "refactor": {
+          "description": "代码重构",
+          "title": "重构"
+        },
+        "docs": {
+          "description": "文档更新",
+          "title": "文档"
+        },
+        "build": {
+          "description": "构建系统或者包依赖更新",
+          "title": "构建系统或者包依赖更新"
+        },
+        "ci": {
+          "description": "CI/CD,自动构建,持续集成相关",
+          "title": "CI/CD"
+        },
+        "test": {
+          "description": "测试用例相关",
+          "title": "测试"
+        },
+        "perf": {
+          "description": "优化",
+          "title": "优化"
+        },
+        "chore": {
+          "description": "非src或者测试文件的更新",
+          "title": "非 src 或者 测试文件的更新"
+        },
+        "revert": {
+          "description": "回到上一个版本",
+          "title": "回溯"
         }
       }
     }

src/@types/app.d.ts

@@ -0,0 +1,10 @@
+import { createStore } from 'vuex'
+declare interface Book {
+  author?: string
+  pageName: string
+}
+
+declare interface StoreInstance extends ReturnType<typeof createStore> {
+  save?: (type: string, val: any) => any
+  get?: (type: string, val: any) => any
+}

src/App.vue

@@ -26,6 +26,7 @@ export default App
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  background: @color-primary;
 }
 
 #nav {

src/api/apiList.ts

@@ -0,0 +1,28 @@
+/** 所有的网络请求地址列表,方便集中维护 */
+
+import { Method, ResponseType } from 'axios'
+
+interface ApiListItem {
+  [key: string]: Array<{ url: string; method?: Method; resType?: ResponseType }>
+}
+const ApiList: ApiListItem = {
+  user: [
+    {
+      url: '/login',
+      method: 'post',
+      resType: 'json'
+    },
+    {
+      url: '/login',
+      method: 'get',
+      resType: 'json'
+    }
+  ],
+  other: [
+    {
+      url: 'fd'
+    }
+  ]
+}
+
+export default ApiList

src/api/axios.ts

@@ -0,0 +1,123 @@
+import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
+
+/**
+ * get status code
+ * @param {AxiosResponse} response Axios  response object
+ */
+const getErrorCode2text = (response: AxiosResponse) => {
+  /** http status code */
+  const code = response.status
+  /** notice text */
+  let message = 'Request Error'
+  switch (code) {
+    case 400:
+      message = 'Request Error'
+      break
+    case 401:
+      message = 'Unauthorized, please login'
+      break
+    case 403:
+      message = 'Access denied'
+      break
+    case 404:
+      message = 'Request address error'
+      break
+    case 408:
+      message = 'Request timeout'
+      break
+    case 500:
+      message = 'Internal server error'
+      break
+    case 501:
+      message = 'Service not implemented'
+      break
+    case 502:
+      message = 'Gateway error'
+      break
+    case 503:
+      message = 'Service is not available'
+      break
+    case 504:
+      message = 'Gateway timeout'
+      break
+    case 505:
+      message = 'HTTP version is not supported'
+      break
+    default:
+  }
+  return message
+}
+
+/**
+ * @returns  {AxiosResponse} result
+ * @tutorial see more:https://github.com/onlyling/some-demo/tree/master/typescript-width-axios
+ * @example
+ * service.get<{data: string; code: number}>('/test').then(({data}) => { console.log(data.code) })
+ */
+const service = Axios.create({
+  baseURL: process.env.VUE_APP_BASE_URL,
+  timeout: 10000
+})
+
+// request interceptors
+
+interface ApiResponse {
+  err_code: number
+  err_msg?: string
+  data?: any
+}
+
+/**
+ * @description 请求发起前的拦截器
+ * @returns {AxiosRequestConfig} config
+ */
+service.interceptors.request.use(async <AxiosRequestConfig>(config: AxiosRequestConfig) => {
+  // check network
+  /* TODO add http headers
+   const token = window.localStorage.getItem('token')
+   config.headers = {
+    ...config.headers,
+    Authorization: token
+  } */
+
+  return config
+})
+
+/**
+ * @description 请求发起前的拦截器
+ * @returns {} config
+ */
+service.interceptors.response.use(
+  /** 请求有响应 */
+  async (response: AxiosResponse) => {
+    if (response.status === 200) {
+      return Promise.resolve(response)
+    } else {
+      const __text = getErrorCode2text(response)
+      return Promise.reject(new Error(__text))
+    }
+  },
+  /** 请求无响应 */
+  (error: AxiosError) => {
+    let __emsg: string = error.message || ''
+
+    if (error.message) {
+      __emsg = error.message
+    }
+
+    if (error.response) {
+      __emsg = error.response.data.msg
+    }
+    // timeout
+    if (__emsg.indexOf('timeout') >= 0) {
+      __emsg = 'timeout'
+    }
+
+    if (error?.response?.data?.code === 401) {
+      return Promise.reject(new Error('401'))
+    }
+    return Promise.reject(new Error(__emsg))
+  }
+)
+
+export default service

src/api/user.ts

@@ -0,0 +1,25 @@
+import API from './request'
+interface HttpParams {
+  coinName: string
+  cashName: string
+}
+
+export interface UserApi {
+  coin2cash(param: HttpParams): Promise<any>
+}
+
+/**
+ * @example Axios.get(`https://api.abckey.com/market/${this.c_switchCashName}/${this.cash.toLowerCase()}&t=${new Date().getTime()}`)
+ * @todo Get the exchange rate of the current currency
+ */
+class User {
+  register() {
+    /*     return API.get<{ data: string | { error: string } }>(`/market/${targetCoin}/${param.cashName.toLowerCase()}`, {
+       params: {
+         t: new Date().getTime()
+       }
+     }).then(({ data }) => data) */
+  }
+}
+
+export default User

src/global.d.ts

@@ -1,4 +0,0 @@
-declare interface Book {
-  author?: string
-  pageName: string
-}

src/main.ts

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

src/store/index.ts

@@ -1,9 +1,10 @@
 import { createStore } from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
-
 import mutations from './mutations'
 import modules from './modules'
-export default createStore({
+import { StoreInstance } from '@/@types/app'
+
+const store: StoreInstance = createStore({
   strict: true,
   state: {
     test: 'in'
@@ -17,3 +18,51 @@ export default createStore({
     })
   ]
 })
+
+/**
+ * @description save -方法是一个读取 state 和触发 mutaitions 的操作集合
+ * @param {string}  type - 要操作的state 的 key 值,如果是根 state,直接写key 值,如果是读取app 模块下 theme 的值,则使用 app.theme
+ * @param {any} msg - 当有 msg 参数时,视为赋值操作,触发 mutation,msg 则为要复制的数据.
+ * @example 以操作 raceConfigType为例,读取操作: this.$store.__s('raceConfigType'),赋值操作:this.$store.__s('raceConfigType','add'), 更改app 下模块 theme,读取操作: this.$store.__s('app.theme'),赋值操作:this.$store.__s('app.theme','light')
+ */
+store.save = (type: string, msg: any) => {
+  let _state: any = store.state
+  if (!type) return store.state
+  if (type.indexOf('.') === -1) {
+    if (msg !== undefined) {
+      store.commit({
+        type: '__set',
+        key: type,
+        val: msg,
+        root: true
+      })
+      return _state
+    } else {
+      return _state[type]
+    }
+  }
+  const _path = type.split('.')
+  for (let i = 0; i < _path.length; i++) {
+    if (_state[_path[i]] !== undefined) {
+      _state = _state[_path[i]]
+    } else {
+      _state = undefined
+    }
+  }
+  if (msg !== undefined && _path.length === 2) {
+    store.commit({
+      type: _path[0] + '/__set',
+      key: _path[1],
+      val: msg
+    })
+  }
+  return _state
+}
+
+/** 读取getter 的操作  */
+store.get = (type: string): any => {
+  if (!type) return store.getters
+  return store.getters[type]
+}
+
+export default store