Skip to content

T
teensmanage
提交 b135263e authored 作者: yyh's avatar yyh
浏览文件
操作

Initial commit

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 589 行增加 和 0 行删除
.browserslistrc 0 → 100644
浏览文件 @ b135263e
> 1%
last 2 versions
not dead
.editorconfig 0 → 100644
浏览文件 @ b135263e
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
.eslintignore 0 → 100644
浏览文件 @ b135263e
*.ts,
*.js,
*.vue
node_modules
dist/
test
build/
src/
\ No newline at end of file
.eslintrc.js 0 → 100644
浏览文件 @ b135263e
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'@vue/standard',
'@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'
}
}
.gitignore 0 → 100644
浏览文件 @ b135263e
.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?
README.md 0 → 100644
浏览文件 @ b135263e
# zheye
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
浏览文件 @ b135263e
module.exports = {
presets: [
'@vue/app'
]
}
package-lock.json 0 → 100644
浏览文件 @ b135263e
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
浏览文件 @ b135263e
{
"name": "zheye",
"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.1",
"bootstrap": "^5.0.0-beta3",
"element-plus": "^1.0.2-beta.70",
"lib-flexible": "^0.3.2",
"postcss-px2rem": "^0.3.0",
"postcss-px2rem-exclude": "0.0.6",
"px2rem-loader": "^0.1.9",
"vue": "^3.0.0",
"vue-axios": "^3.2.5",
"vue-router": "^4.0.0-rc.3",
"vuex": "^4.0.0-rc.1"
},
"devDependencies": {
"@types/less": "^3.0.3",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"lib-flexible": "^0.3.2",
"postcss-plugin-px2rem": "^0.8.1",
"postcss-px-to-viewport": "^1.1.1",
"typescript": "~4.1.5"
}
}
public/index.html 0 → 100644
浏览文件 @ b135263e
<!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>
src/App.vue 0 → 100644
浏览文件 @ b135263e
<template>
<div class="container">
<router-view></router-view>
</div>
</template>
<script lang="ts">
import { defineComponent,reactive } from 'vue'
export default defineComponent({
name: 'App'
})
</script>
<style>
</style>
src/axios/axios.ts 0 → 100644
浏览文件 @ b135263e
import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
import {ElMessage} from 'element-plus';
export class Request {
public static axiosInstance: AxiosInstance;
// constructor() {
// // 创建axios实例
// this.axiosInstance = axios.create({timeout: 1000 * 12});
// // 初始化拦截器
// this.initInterceptors();
// }
public static init() {
// 创建axios实例
this.axiosInstance = axios.create({
baseURL: 'http://localhost:8080/',
timeout: 6000
});
// 初始化拦截器
this.initInterceptors();
return axios;
}
// 为了让http.ts中获取初始化好的axios实例
// public getInterceptors() {
// return this.axiosInstance;
// }
// 初始化拦截器
public static initInterceptors() {
// 设置post请求头
this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
* 请求拦截器
* 每次请求前，如果存在token则在请求头中携带token
*/
this.axiosInstance.interceptors.request.use(
(config: AxiosRequestConfig) => {
// const token = Vue.ls.get(ACCESS_TOKEN)
// if (token) {
// config.headers['Authorization'] = 'Bearer ' + token
// }
// 登录流程控制中，根据本地是否存在token判断用户的登录情况
// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
// if (config.headers.isJwt) {
const token = localStorage.getItem('ACCESS_TOKEN');
if (token) {
config.headers.Authorization = 'Bearer ' + token;
}
// }
return config;
},
(error: any) => {
console.log(error);
},
);
// 响应拦截器
this.axiosInstance.interceptors.response.use(
// 请求成功
(response: AxiosResponse) => {
// if (res.headers.authorization) {
// localStorage.setItem('id_token', res.headers.authorization);
// } else {
// if (res.data && res.data.token) {
// localStorage.setItem('id_token', res.data.token);
// }
// }
if (response.status === 200) {
// return Promise.resolve(response.data);
return response;
} else {
Request.errorHandle(response);
// return Promise.reject(response.data);
return response;
}
},
// 请求失败
(error: any) => {
const {response} = error;
if (response) {
// 请求已发出，但是不在2xx的范围
Request.errorHandle(response);
return Promise.reject(response.data);
} else {
// 处理断网的情况
// eg:请求超时或断网时，更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
ElMessage.error('网络连接异常,请稍后再试!');
}
});
}
/**
* http握手错误
* @param res 响应回调,根据不同响应进行不同操作
*/
private static errorHandle(res: any) {
// 状态码判断
switch (res.status) {
case 401:
break;
case 403:
break;
case 404:
ElMessage.error('请求的资源不存在');
break;
default:
ElMessage.error('连接错误');
}
}
}
\ No newline at end of file
src/axios/server.ts 0 → 100644
浏览文件 @ b135263e
import { Request } from '@/axios/axios';
export function login (parameter: any) {
return Request.axiosInstance({
url: '/cxLogin',
method: 'post',
data: parameter
})
}
\ No newline at end of file
src/hooks/useClickOutside.ts 0 → 100644
浏览文件 @ b135263e
import {ref ,onMounted,onUnmounted,Ref} from 'vue'
const useClickOutside = (elementRef:Ref<null | HTMLElement>)=>{
const isClickOutside = ref(false)
const handler = (e:MouseEvent)=>{
if(elementRef.value){
if(elementRef.value.contains(e.target as HTMLElement)){
isClickOutside.value = false
}else{
isClickOutside.value = true
}
}
}
onMounted(() => {
document.addEventListener('click', handler)
})
onUnmounted(() => {
document.addEventListener('click', handler)
})
return isClickOutside
}
export default useClickOutside
\ No newline at end of file
src/main.ts 0 → 100644
浏览文件 @ b135263e
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import 'lib-flexible'
import { Request } from '@/axios/axios';
import VueAxios from 'vue-axios'
// import less from 'less'
const app = createApp(App)
app.use(router)
// app.use(less)
app.use(ElementPlus)
app.use(VueAxios, Request.init())
app.mount('#app')
src/router.ts 0 → 100644
浏览文件 @ b135263e
import { createRouter, createWebHistory } from 'vue-router'
// import Home from './views/Home.vue'
import Login from './views/Login.vue'
// import Signup from './views/Signup.vue'
// import ColumnDetail from './views/ColumnDetail.vue'
// import CreatePost from './views/CreatePost.vue'
// import PostDetail from './views/PostDetail.vue'
// import NotFound from './views/NotFound.vue'
// import store from './store'
// import { axios } from './libs/http'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
name: 'home',
component: ()=>import('@/views/Layout.vue')
}
]
})
// 路由前置守卫
// router.beforeEach((to, from, next) => {
// const { user, token } = store.state
// const { requiredLogin, redirectAlreadyLogin } = to.meta
// if (!user.isLogin) {
// // 没有登录
// if (token) {
// axios.defaults.headers.common.Authorization = `Bearer ${token}`
// store.dispatch('fetchCurrentUser').then(() => {
// if (redirectAlreadyLogin) {
// next('/')
// } else {
// next()
// }
// }).catch(err => {
// console.log(err)
// store.commit('logout')
// next('login')
// })
// } else {
// if (requiredLogin) {
// next('login')
// } else {
// next()
// }
// }
// } else {
// // 已经登录
// if (redirectAlreadyLogin) {
// next('/')
// } else {
// next()
// }
// }
// })
export default router
src/shims-vue.d.ts 0 → 100644
浏览文件 @ b135263e
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
src/views/Layout.vue 0 → 100644
浏览文件 @ b135263e
<template>
<div>
<div class="header">
123
</div>
<div class="contain-center">
<div class="left-bar">
left
</div>
<div class="container">
container
</div>
</div>
</div>
</template>
<script lang="ts">
import less from 'less'
import { defineComponent, computed, onMounted } from 'vue'
export default defineComponent({
name:'Layout'
})
</script>
<style scoped>
.header{
height: 90px;
width: 100%;
}
.container-center{
display: flex;
}
.container{
width: 70%;
height: 100%;
}
.left-bar{
width: 30%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/Login.vue 0 → 100644
浏览文件 @ b135263e
<template>
<div>
123
</div>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'
export default defineComponent({
name:'Home'
})
</script>
\ No newline at end of file
tsconfig.json 0 → 100644
浏览文件 @ b135263e
{
"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"
]
}
vue.config.js 0 → 100644
浏览文件 @ b135263e
module.exports = {
// 基本路径
publicPath: './',
// 输出文件目录
outputDir: process.env.outputDir,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 用于放置生成的静态资源
assetsDir: 'static',
// 指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
indexPath: 'index.html',
filenameHashing: true,
// vue-loader 配置项
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
devServer: {
open: true, // 是否自动打开浏览器页面
host: '0.0.0.0',
port: 8082,
https: false, // 使用https提供服务
hotOnly: false,
proxy: null
},
// image-webpack-loader图片压缩配置
// chainWebpack: config => {
// config.module
// .rule('images')
// .use('image-webpack-loader')
// .loader('image-webpack-loader')
// .options({
// bypassOnDebug: true
// })
// .end()
// },
chainWebpack: (config) => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 192
})
},
css: {
loaderOptions: {
postcss: {
plugins: [
require ('postcss-plugin-px2rem') ({
rootValue: 192, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
// propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: ['menu-list'], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
// mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
// minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
remUnit: 192
})
]
}
}
},
// 第三方插件配置
pluginOptions: { }
// module: {
// rules: [{
// test: /\.css$/,
// use: [{
// loader: 'style-loader'
// }, {
// loader: 'css-loader'
// }, {
// loader: 'px2rem-loader',
// // options here
// options: {
// remUnit: 192,//设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
// // remPrecision: 8//换算的rem保留几位小数点
// }
// }]
// }]
// }
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论