Jason/league-explorer-typescript
1
0
Fork 0
forked from UzTech/Vue3-typescript-demo
Code Issues Pull Requests Projects Releases 1 Wiki Activity

init

Browse Source
This commit is contained in:
Jason.Chen
2021-09-16 15:56:59 +08:00
commit d9ea8630df
29 changed files with 9807 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.browserslistrc Normal file
View File

@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

18
.eslintrc.js Normal file
View File

@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}

23
.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
README.md Normal file
View File

@@ -0,0 +1,24 @@
# league-explorer
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

8
babel.config.js Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
]
}

36
package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "league-explorer",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.4",
"store": "^2.0.12",
"vue": "^3.2.11",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@types/store": "^2.0.2",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"babel-plugin-import": "^1.13.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"typescript": "~4.1.5"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

27
src/App.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<router-view v-slot="{ Component }">
<keep-alive :include="includeList">
<component :is="Component"></component>
</keep-alive>
</router-view>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
const includeList = ref<string[]>([])
const route = useRoute()
watch(route, (to: RouteLocationNormalizedLoaded) => {
if (to.meta?.keepAlive && includeList.value.indexOf(to.name as string) === -1) {
includeList.value.push(to.name as string)
}
})
</script>
<style lang="less">
body {
background: #f7f8fa;
}
</style>

5
src/api/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import auth from '@/config/interfaces/auth'
export {
auth
}

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

15
src/config/interfaces/auth.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { LoginData, LoginResponse } from '@/types/auth'
import request from '@/utils/request'
const login = (data: LoginData): Promise<LoginResponse> => {
return request.post('user/auth/login', data)
}
const register = (data: LoginData): Promise<LoginResponse> => {
return request.post('user/auth/register', data)
}
export default {
login,
register
}

24
src/config/routers/auth.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { MyRouteRecordRaw } from '@/types/router';
export default [
{
path: '/auth/login',
name: 'AuthLogin',
meta: {
title: '用户登录',
requiresAuth: false,
keepAlive: false
},
component: () => import(/* webpackChunkName: "auth" */ '@/views/Auth/login.vue')
},
{
path: '/auth/register',
name: 'AuthRegister',
meta: {
title: '用户注册',
requiresAuth: false,
keepAlive: false
},
component: () => import(/* webpackChunkName: "auth" */ '@/views/Auth/register.vue')
}
] as MyRouteRecordRaw[]

10
src/main.ts Normal file
View File

@@ -0,0 +1,10 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

92
src/router/index.ts Normal file
View File

@@ -0,0 +1,92 @@
import auth from '@/config/routers/auth'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import type { MyRouteMeta, MyRouteRecordRaw } from '@/types/router'
import store from 'store'
import { createRouter, createWebHistory } from 'vue-router'
/**
* 定义基础路由
*/
const routes: MyRouteRecordRaw[] = [
{
path: '/',
name: 'Home',
meta: {
title: '首页',
keepAlive: true
},
component: () => import(/* webpackChunkName: "home" */ '@/views/Home/index.vue')
},
...auth,
{
path: '/404',
name: 'NotFound',
component: () => import(/* webpackChunkName: "home" */ '@/views/404.vue'),
meta: {
title: '页面不存在',
keepAlive: true
}
},
{
path: '/:pathMatch(.*)*',
name: 'Miss',
redirect: '/404'
}
]
/**
* 创建路由
*/
const router = createRouter({
history: createWebHistory(),
routes
})
/**
* 路由守卫
*/
router.beforeEach((to, from, next) => {
typeof to.meta !== 'undefined' && setDocumentTitle(<MyRouteMeta>to.meta)
const isAuthenticated: string = store.get(ACCESS_TOKEN)
if (to.name !== 'AuthLogin' && to.meta.requiresAuth && !isAuthenticated) {
next({ name: 'AuthLogin', query: { to: to.path } })
} else {
next()
}
})
/**
* 设置文档标题
* @param meta MyRouteMeta
*/
function setDocumentTitle (meta: MyRouteMeta) {
document.title = meta?.title
const ua = navigator.userAgent
// eslint-disable-next-line
const regex = /\bMicroMessenger\/([\d\.]+)/
if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
const i = document.createElement('iframe')
i.src = '/favicon.ico'
i.style.display = 'none'
i.onload = function () {
setTimeout(function () {
i.remove()
}, 9)
}
document.body.appendChild(i)
}
}
/**
* 离开页面后返回顶部
*/
router.afterEach((to, from) => {
// 只有定义了 scrollToTop:false 的页面，才不滚到顶部，默认都到顶
if (from.meta?.scrollToTop !== false) {
window.scrollTo(0, 0)
}
})
export default router

6
src/shims-vue.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

12
src/store/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

1
src/store/mutation-types.ts Normal file
View File

@@ -0,0 +1 @@
export const ACCESS_TOKEN = 'Access-Token'

11
src/types/auth.d.ts vendored Normal file
View File

@@ -0,0 +1,11 @@
export declare type LoginData = {
username: string;
password: string;
verify?: number;
invite?: string;
}
export declare type LoginResponse = {
access_token: string;
token_type: string;
}

15
src/types/router.d.ts vendored Normal file
View File

@@ -0,0 +1,15 @@
import { RouteMeta, RouteRecordRaw } from 'vue-router'
export declare type MyRouteMeta = RouteMeta & {
title: string
keepAlive?: boolean
requiresAuth?: boolean
scrollToTop?: boolean
transition?: string
}
export declare type MyRouteRecordRaw = RouteRecordRaw & {
name?: string
meta?: MyRouteMeta
children?: MyRouteRecordRaw[]
}

44
src/utils/filters.ts Normal file
View File

@@ -0,0 +1,44 @@
/**
* 秒，转化为时间格式 100 => 01:40
* @param time
*/
const numberToTime = (time: number) => {
let timeStr = ''
const stringFormat = (i: number) => {
return i < 10 ? `0${i}` : `${i}`
}
let minuteTime = 0
let secondTime = 0
let hourTime = 0
if (time < 60) {
timeStr = `00:${stringFormat(time)}`
} else if (time >= 60 && time < 3600) {
minuteTime = Math.ceil(time / 60)
secondTime = time % 60
timeStr = `${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
} else if (time >= 3600) {
const _t = time % 3600
hourTime = Math.ceil(time / 3600)
minuteTime = Math.ceil(_t / 60)
secondTime = _t % 60
timeStr = `${stringFormat(hourTime)}:${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
}
return timeStr
}
/**
* 隐藏手机号中间位数
* @param str 要修改的字符串
* @param start 开始位置隐藏几位
* @param end 末端隐藏位数
*/
const hideMiddle = (str: string, start?: number, end?: number) => {
start = start || 3
end = end || 4
return str.substr(0, start) + '***' + str.substr(-end)
}
export {
numberToTime,
hideMiddle
}

45
src/utils/request.ts Normal file
View File

@@ -0,0 +1,45 @@
import { ACCESS_TOKEN } from '@/store/mutation-types'
import axios, { AxiosRequestConfig } from 'axios'
import store from 'store'
import router from '../router'
const request = axios.create({
baseURL: process.env.VUE_APP_API_URL,
timeout: 5000
})
/**
* 请求的配置
* @param config
*/
const axiosConf = (config: AxiosRequestConfig) => {
config.headers.Authorization = store.get(ACCESS_TOKEN)
config.headers.Accept = 'application/json'
return config
}
/**
* 请求之前的拦截器，如果配置直接放在create中，会导致无法获取到 access_token 的问题
*/
request.interceptors.request.use(axiosConf, err => {
return Promise.reject(err)
})
/**
* 返回拦截器
*/
request.interceptors.response.use(async (response) => {
if (response.status === 401 || response.data?.status_code === 401) {
await router.push({ name: 'AuthLogin' })
}
if (response.status === 200 && response.data?.status_code === 200) {
return response.data?.data
}
return Promise.reject(response.data)
}, () => {
return Promise.reject('网络请求超时')
})
export default request

13
src/views/404.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
404
</template>
<script>
export default {
name: '404'
}
</script>
<style scoped>
</style>

13
src/views/Auth/login.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
登录
</template>
<script>
export default {
name: 'login'
}
</script>
<style scoped>
</style>

13
src/views/Auth/register.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
注册
</template>
<script>
export default {
name: 'register'
}
</script>
<style scoped>
</style>

11
src/views/Home/index.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="home">
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>

39
tsconfig.json Normal file
View File

@@ -0,0 +1,39 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

11
vue.config.js Normal file
View File

@@ -0,0 +1,11 @@
module.exports = {
assetsDir: 'static', // 配置js、css静态资源二级目录的位置
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}

9271
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff