JayChou
3 months ago
commit
0ec955a8d0
35 changed files with 18994 additions and 0 deletions
@ -0,0 +1,4 @@ |
|||||||
|
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||||
|
NODE_ENV = 'development' |
||||||
|
VITE_APP_TITLE = '大屏数据' |
||||||
|
VITE_APP_BASE_API = 'http://10.115.6.28:18083/' |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||||
|
NODE_ENV = 'development' |
||||||
|
VITE_APP_TITLE = '大屏数据' |
||||||
|
VITE_APP_BASE_API = '/api' |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"recommendations": ["Vue.volar"] |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
# Vue 3 + TypeScript + Vite |
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>Vite + Vue + TS</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"></div> |
||||||
|
<script type="module" src="/src/main.ts"></script> |
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script> |
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.4/echarts-gl.min.js"></script> |
||||||
|
</html> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,34 @@ |
|||||||
|
{ |
||||||
|
"name": "vite-project", |
||||||
|
"private": true, |
||||||
|
"version": "0.0.0", |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite --open", |
||||||
|
"build": "vue-tsc -b && vite build", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@kjgl77/datav-vue3": "^1.7.3", |
||||||
|
"axios": "^1.7.2", |
||||||
|
"element-plus": "^2.9.5", |
||||||
|
"lib-flexible": "^0.3.2", |
||||||
|
"pinia": "^2.1.7", |
||||||
|
"postcss-plugin-px2rem": "^0.8.1", |
||||||
|
"sass": "^1.77.6", |
||||||
|
"sass-loader": "^14.2.1", |
||||||
|
"vue": "^3.4.29", |
||||||
|
"vue-router": "4" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/node": "^20.14.9", |
||||||
|
"@vitejs/plugin-vue": "^5.0.5", |
||||||
|
"postcss": "^8.4.39", |
||||||
|
"postcss-html": "^1.7.0", |
||||||
|
"postcss-scss": "^4.0.9", |
||||||
|
"px2rem-loader": "^0.1.9", |
||||||
|
"typescript": "^5.2.2", |
||||||
|
"vite": "^5.3.1", |
||||||
|
"vue-tsc": "^2.0.21" |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,16 @@ |
|||||||
|
<template> |
||||||
|
<router-view></router-view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang='ts' setup> |
||||||
|
// import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||||
|
// window.addEventListener("beforeunload", function (e) { |
||||||
|
// e.preventDefault(); |
||||||
|
// e.returnValue = ""; |
||||||
|
// return ""; |
||||||
|
// }); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang='scss' scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 407 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,48 @@ |
|||||||
|
<template> |
||||||
|
<div class="container-bgc"> |
||||||
|
<div class="top"> |
||||||
|
<div class="title">{{ setting.title }}</div> |
||||||
|
</div> |
||||||
|
<router-view v-slot="{ Component }"> |
||||||
|
<keep-alive > |
||||||
|
<component :is="Component"></component> |
||||||
|
</keep-alive> |
||||||
|
</router-view> |
||||||
|
<keep-alive> </keep-alive> |
||||||
|
<div class="bottom"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; |
||||||
|
import settingStore from "@/store/modules/setting"; |
||||||
|
const setting = settingStore(); |
||||||
|
console.log(setting.title); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container-bgc { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
// height: 1080px; |
||||||
|
height: 1080px; |
||||||
|
background-color: #091d22; |
||||||
|
background: url("../assets//images/bg2.png") no-repeat; |
||||||
|
|
||||||
|
|
||||||
|
.top { |
||||||
|
width: 100%; |
||||||
|
height: 75px; |
||||||
|
text-align: center; |
||||||
|
font-size: 42px; |
||||||
|
line-height: 75px; |
||||||
|
font-style: italic; |
||||||
|
background: url("../assets/images/topbgc.png") no-repeat; |
||||||
|
// background-position: center bottom -10px; |
||||||
|
.title { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { createApp } from 'vue' |
||||||
|
import App from './App.vue' |
||||||
|
import router from '@/router' |
||||||
|
import '@/styles/index.scss' |
||||||
|
import ElementPlus from 'element-plus'; |
||||||
|
import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件
|
||||||
|
import '@/utils/rem.js' |
||||||
|
import DataVVue3 from '@kjgl77/datav-vue3' |
||||||
|
import pinia from '@/store/index' |
||||||
|
const app = createApp(App) |
||||||
|
app.use(ElementPlus) |
||||||
|
app.use(pinia) |
||||||
|
app.use(DataVVue3) |
||||||
|
app.use(router) |
||||||
|
app.mount('#app') |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import { createRouter, createWebHashHistory } from "vue-router"; |
||||||
|
import layout from '@/layout/index.vue' |
||||||
|
const routerList :any = [ |
||||||
|
{ |
||||||
|
path: "/", |
||||||
|
component: layout, |
||||||
|
children:[ |
||||||
|
{ |
||||||
|
path:'', |
||||||
|
name:'Home', |
||||||
|
component:() => import('@/views/largeDataScreen/home.vue') |
||||||
|
}, |
||||||
|
|
||||||
|
] |
||||||
|
}, |
||||||
|
]; |
||||||
|
const router :any = createRouter({ |
||||||
|
history: createWebHashHistory(), |
||||||
|
routes: routerList, |
||||||
|
scrollBehavior() { |
||||||
|
return { |
||||||
|
left: 0, |
||||||
|
top: 0, |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
export default router |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
// 引入仓库
|
||||||
|
import { createPinia } from 'pinia' |
||||||
|
// 创建仓库
|
||||||
|
const pinia = createPinia() |
||||||
|
// 暴露仓库
|
||||||
|
export default pinia |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { defineStore } from "pinia" |
||||||
|
const settingStore = defineStore("settingStore", { |
||||||
|
state: ():any => { |
||||||
|
return { |
||||||
|
title: "虚拟仿真实验项目", |
||||||
|
}; |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
setTitle(name: any) { |
||||||
|
this.title = name; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default settingStore; |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
@import url('./reset.scss'); |
||||||
|
/* 滚动条整体宽度 */ |
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 滚动条滑块样式 */ |
||||||
|
::-webkit-scrollbar-thumb { |
||||||
|
background-color: darkgrey; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 滑块处于活动状态时的样式 */ |
||||||
|
::-webkit-scrollbar-thumb:active { |
||||||
|
background-color: lightgrey; |
||||||
|
} |
||||||
|
|
||||||
|
/* 滚动条轨道样式 */ |
||||||
|
::-webkit-scrollbar-track { |
||||||
|
background-color: #f1f1f1; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 轨道悬停样式 */ |
||||||
|
::-webkit-scrollbar-track:hover { |
||||||
|
background-color: #e1e1e1; |
||||||
|
} |
||||||
@ -0,0 +1,188 @@ |
|||||||
|
/** |
||||||
|
* ENGINE |
||||||
|
* v0.2 | 20150615 |
||||||
|
* License: none (public domain) |
||||||
|
*/ |
||||||
|
|
||||||
|
*, |
||||||
|
*:after, |
||||||
|
*:before { |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
html, |
||||||
|
body, |
||||||
|
div, |
||||||
|
span, |
||||||
|
applet, |
||||||
|
object, |
||||||
|
iframe, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6, |
||||||
|
p, |
||||||
|
blockquote, |
||||||
|
pre, |
||||||
|
a, |
||||||
|
abbr, |
||||||
|
acronym, |
||||||
|
address, |
||||||
|
big, |
||||||
|
cite, |
||||||
|
code, |
||||||
|
del, |
||||||
|
dfn, |
||||||
|
em, |
||||||
|
img, |
||||||
|
ins, |
||||||
|
kbd, |
||||||
|
q, |
||||||
|
s, |
||||||
|
samp, |
||||||
|
small, |
||||||
|
strike, |
||||||
|
strong, |
||||||
|
sub, |
||||||
|
sup, |
||||||
|
tt, |
||||||
|
var, |
||||||
|
b, |
||||||
|
u, |
||||||
|
i, |
||||||
|
center, |
||||||
|
dl, |
||||||
|
dt, |
||||||
|
dd, |
||||||
|
ol, |
||||||
|
ul, |
||||||
|
li, |
||||||
|
fieldset, |
||||||
|
form, |
||||||
|
label, |
||||||
|
legend, |
||||||
|
table, |
||||||
|
caption, |
||||||
|
tbody, |
||||||
|
tfoot, |
||||||
|
thead, |
||||||
|
tr, |
||||||
|
th, |
||||||
|
td, |
||||||
|
article, |
||||||
|
aside, |
||||||
|
canvas, |
||||||
|
details, |
||||||
|
embed, |
||||||
|
figure, |
||||||
|
figcaption, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
hgroup, |
||||||
|
menu, |
||||||
|
nav, |
||||||
|
output, |
||||||
|
ruby, |
||||||
|
section, |
||||||
|
summary, |
||||||
|
time, |
||||||
|
mark, |
||||||
|
audio, |
||||||
|
video { |
||||||
|
font: inherit; |
||||||
|
font-size: 100%; |
||||||
|
|
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
vertical-align: baseline; |
||||||
|
|
||||||
|
border: 0; |
||||||
|
} |
||||||
|
|
||||||
|
article, |
||||||
|
aside, |
||||||
|
details, |
||||||
|
figcaption, |
||||||
|
figure, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
hgroup, |
||||||
|
menu, |
||||||
|
nav, |
||||||
|
section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
ol, |
||||||
|
ul { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
blockquote, |
||||||
|
q { |
||||||
|
quotes: none; |
||||||
|
&:before, |
||||||
|
&:after { |
||||||
|
content: ''; |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
sub, |
||||||
|
sup { |
||||||
|
font-size: 75%; |
||||||
|
line-height: 0; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
sup { |
||||||
|
top: -.5em; |
||||||
|
} |
||||||
|
sub { |
||||||
|
bottom: -.25em; |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
border-spacing: 0; |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
input, |
||||||
|
textarea, |
||||||
|
button { |
||||||
|
font-family: inhert; |
||||||
|
font-size: inherit; |
||||||
|
|
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
select { |
||||||
|
text-indent: .01px; |
||||||
|
text-overflow: ''; |
||||||
|
|
||||||
|
border: 0; |
||||||
|
border-radius: 0; |
||||||
|
|
||||||
|
-webkit-appearance: none; |
||||||
|
-moz-appearance: none; |
||||||
|
} |
||||||
|
select::-ms-expand { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
code, |
||||||
|
pre { |
||||||
|
font-family: monospace, monospace; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
@ -0,0 +1,118 @@ |
|||||||
|
|
||||||
|
;(function(win, lib) { |
||||||
|
var doc = win.document; |
||||||
|
var docEl = doc.documentElement; |
||||||
|
var metaEl = doc.querySelector('meta[name="viewport"]'); |
||||||
|
var flexibleEl = doc.querySelector('meta[name="flexible"]'); |
||||||
|
var dpr = 0; |
||||||
|
var scale = 0; |
||||||
|
var tid; |
||||||
|
var flexible = lib.flexible || (lib.flexible = {}); |
||||||
|
|
||||||
|
if (metaEl) { |
||||||
|
console.warn('将根据已有的meta标签来设置缩放比例'); |
||||||
|
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); |
||||||
|
if (match) { |
||||||
|
scale = parseFloat(match[1]); |
||||||
|
dpr = parseInt(1 / scale); |
||||||
|
} |
||||||
|
} else if (flexibleEl) { |
||||||
|
var content = flexibleEl.getAttribute('content'); |
||||||
|
if (content) { |
||||||
|
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); |
||||||
|
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); |
||||||
|
if (initialDpr) { |
||||||
|
dpr = parseFloat(initialDpr[1]); |
||||||
|
scale = parseFloat((1 / dpr).toFixed(2)); |
||||||
|
} |
||||||
|
if (maximumDpr) { |
||||||
|
dpr = parseFloat(maximumDpr[1]); |
||||||
|
scale = parseFloat((1 / dpr).toFixed(2)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (!dpr && !scale) { |
||||||
|
var isAndroid = win.navigator.appVersion.match(/android/gi); |
||||||
|
var isIPhone = win.navigator.appVersion.match(/iphone/gi); |
||||||
|
var devicePixelRatio = win.devicePixelRatio; |
||||||
|
if (isIPhone) { |
||||||
|
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
||||||
|
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
||||||
|
dpr = 3; |
||||||
|
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ |
||||||
|
dpr = 2; |
||||||
|
} else { |
||||||
|
dpr = 1; |
||||||
|
} |
||||||
|
} else { |
||||||
|
// 其他设备下，仍旧使用1倍的方案
|
||||||
|
dpr = 1; |
||||||
|
} |
||||||
|
scale = 1 / dpr; |
||||||
|
} |
||||||
|
|
||||||
|
docEl.setAttribute('data-dpr', dpr); |
||||||
|
if (!metaEl) { |
||||||
|
metaEl = doc.createElement('meta'); |
||||||
|
metaEl.setAttribute('name', 'viewport'); |
||||||
|
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); |
||||||
|
if (docEl.firstElementChild) { |
||||||
|
docEl.firstElementChild.appendChild(metaEl); |
||||||
|
} else { |
||||||
|
var wrap = doc.createElement('div'); |
||||||
|
wrap.appendChild(metaEl); |
||||||
|
doc.write(wrap.innerHTML); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function refreshRem(){ |
||||||
|
var width = docEl.getBoundingClientRect().width; |
||||||
|
if (width / dpr > 1920) { |
||||||
|
width = 1920 * dpr; |
||||||
|
} |
||||||
|
var rem = width / 10; |
||||||
|
docEl.style.fontSize = rem + 'px'; |
||||||
|
flexible.rem = win.rem = rem; |
||||||
|
} |
||||||
|
|
||||||
|
win.addEventListener('resize', function() { |
||||||
|
clearTimeout(tid); |
||||||
|
tid = setTimeout(refreshRem, 300); |
||||||
|
}, false); |
||||||
|
win.addEventListener('pageshow', function(e) { |
||||||
|
if (e.persisted) { |
||||||
|
clearTimeout(tid); |
||||||
|
tid = setTimeout(refreshRem, 300); |
||||||
|
} |
||||||
|
}, false); |
||||||
|
|
||||||
|
if (doc.readyState === 'complete') { |
||||||
|
doc.body.style.fontSize = 12 * dpr + 'px'; |
||||||
|
} else { |
||||||
|
doc.addEventListener('DOMContentLoaded', function(e) { |
||||||
|
doc.body.style.fontSize = 12 * dpr + 'px'; |
||||||
|
}, false); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
refreshRem(); |
||||||
|
|
||||||
|
flexible.dpr = win.dpr = dpr; |
||||||
|
flexible.refreshRem = refreshRem; |
||||||
|
flexible.rem2px = function(d) { |
||||||
|
var val = parseFloat(d) * this.rem; |
||||||
|
if (typeof d === 'string' && d.match(/rem$/)) { |
||||||
|
val += 'px'; |
||||||
|
} |
||||||
|
return val; |
||||||
|
} |
||||||
|
flexible.px2rem = function(d) { |
||||||
|
var val = parseFloat(d) / this.rem; |
||||||
|
if (typeof d === 'string' && d.match(/px$/)) { |
||||||
|
val += 'rem'; |
||||||
|
} |
||||||
|
return val; |
||||||
|
} |
||||||
|
|
||||||
|
})(window, window['lib'] || (window['lib'] = {})); |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
// 引入第三方请求库axios
|
||||||
|
import axios from 'axios' |
||||||
|
// 创建axios实例
|
||||||
|
const server = axios.create({ |
||||||
|
baseURL:import.meta.env.VITE_APP_BASE_API, |
||||||
|
timeout:10000, |
||||||
|
}) |
||||||
|
// 创建请求拦截器
|
||||||
|
server.interceptors.request.use((config) => { |
||||||
|
return config |
||||||
|
|
||||||
|
}) |
||||||
|
// 创建相应拦截器
|
||||||
|
server.interceptors.response.use((response:any) => { |
||||||
|
if(response.status === 200){ |
||||||
|
return response.data |
||||||
|
} |
||||||
|
// return response
|
||||||
|
}) |
||||||
|
|
||||||
|
// 暴露axios实例
|
||||||
|
|
||||||
|
export default server |
||||||
@ -0,0 +1 @@ |
|||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,27 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"composite": true, |
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||||
|
"target": "ES2020", |
||||||
|
"useDefineForClassFields": true, |
||||||
|
"module": "ESNext", |
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||||
|
"skipLibCheck": true, |
||||||
|
|
||||||
|
/* Bundler mode */ |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"allowImportingTsExtensions": true, |
||||||
|
"resolveJsonModule": true, |
||||||
|
"isolatedModules": true, |
||||||
|
"moduleDetection": "force", |
||||||
|
"noEmit": true, |
||||||
|
"jsx": "preserve", |
||||||
|
|
||||||
|
/* Linting */ |
||||||
|
"strict": true, |
||||||
|
"noUnusedLocals": true, |
||||||
|
"noUnusedParameters": true, |
||||||
|
"noFallthroughCasesInSwitch": true |
||||||
|
}, |
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "ES2020", |
||||||
|
"useDefineForClassFields": true, |
||||||
|
"module": "ESNext", |
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||||
|
"skipLibCheck": true, |
||||||
|
|
||||||
|
/* Bundler mode */ |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"allowImportingTsExtensions": true, |
||||||
|
"resolveJsonModule": true, |
||||||
|
"isolatedModules": true, |
||||||
|
"noEmit": true, |
||||||
|
"jsx": "preserve", |
||||||
|
|
||||||
|
/* Linting */ |
||||||
|
"strict": true, |
||||||
|
"noUnusedLocals": true, |
||||||
|
"noUnusedParameters": true, |
||||||
|
"noFallthroughCasesInSwitch": true, |
||||||
|
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录 |
||||||
|
"paths": { |
||||||
|
//路径映射，相对于baseUrl |
||||||
|
"@/*": ["src/*"] |
||||||
|
}, |
||||||
|
"types": ["vite/client"] |
||||||
|
}, |
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], |
||||||
|
"references": [{ "path": "./tsconfig.node.json" }] |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"composite": true, |
||||||
|
"skipLibCheck": true, |
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"allowSyntheticDefaultImports": true, |
||||||
|
"strict": true |
||||||
|
}, |
||||||
|
"include": ["vite.config.ts"] |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import { defineConfig } from "vite"; |
||||||
|
import vue from "@vitejs/plugin-vue"; |
||||||
|
import path from "path"; |
||||||
|
// @ts-ignore
|
||||||
|
import postcssPluginPx2rem from "postcss-plugin-px2rem"; //引入插件
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
//配置参数
|
||||||
|
const px2remOptions = { |
||||||
|
rootValue: 192, //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
|
||||||
|
unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
|
||||||
|
// propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
|
||||||
|
// propBlackList: [], // 黑名单
|
||||||
|
// exclude:false, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
|
||||||
|
// selectorBlackList: [], //要忽略并保留为px的选择器
|
||||||
|
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
|
||||||
|
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
|
||||||
|
mediaQuery: false, //（布尔值）允许在媒体查询中转换px
|
||||||
|
minPixelValue: 0 , //设置要替换的最小像素值(3px会被转rem)。 默认 0
|
||||||
|
} |
||||||
|
export default defineConfig({ |
||||||
|
plugins: [vue()], |
||||||
|
server:{ |
||||||
|
host: '0.0.0.0', |
||||||
|
port: 8866, |
||||||
|
}, |
||||||
|
resolve: { |
||||||
|
alias: { |
||||||
|
"@": path.resolve("./src"), // 相对路径别名配置，使用 @ 代替 src
|
||||||
|
}, |
||||||
|
}, |
||||||
|
css: { |
||||||
|
preprocessorOptions: { |
||||||
|
scss: { |
||||||
|
javascriptEnabled: true, |
||||||
|
additionalData: '@import "./src/styles/variable.scss";', |
||||||
|
}, |
||||||
|
}, |
||||||
|
postcss: { |
||||||
|
plugins: [ |
||||||
|
// 配置响应式插件
|
||||||
|
postcssPluginPx2rem(px2remOptions) |
||||||
|
|
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
Loading…
Reference in new issue