cao
This commit is contained in:
parent
cffcd0014e
commit
5e530a1a90
File diff suppressed because it is too large
Load Diff
|
@ -9,10 +9,15 @@
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue": "^3.3.8"
|
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||||
|
"echarts": "^5.4.3",
|
||||||
|
"vue": "^3.3.8",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^4.5.0",
|
"@vitejs/plugin-vue": "^4.5.0",
|
||||||
|
"sass": "^1.69.5",
|
||||||
|
"sass-loader": "^13.3.2",
|
||||||
"vite": "^5.0.0"
|
"vite": "^5.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
34
src/App.vue
34
src/App.vue
|
@ -1,30 +1,12 @@
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<router-view></router-view>
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://vuejs.org/" target="_blank">
|
|
||||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<HelloWorld msg="Vite + Vue" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss">
|
||||||
.logo {
|
* {
|
||||||
height: 6em;
|
margin: 0;
|
||||||
padding: 1.5em;
|
padding: 0;
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
}
|
||||||
.logo:hover {
|
</style>
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.vue:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #42b883aa);
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,40 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
msg: String,
|
|
||||||
})
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<button type="button" @click="count++">count is {{ count }}</button>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Check out
|
|
||||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
||||||
>create-vue</a
|
|
||||||
>, the official Vue + Vite starter
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Install
|
|
||||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
|
||||||
in your IDE for a better DX
|
|
||||||
</p>
|
|
||||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<div style="background-color: red; height: 100px; width: 750px;">
|
||||||
|
sadsasdfsdf
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
</script>
|
|
@ -1,5 +1,10 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import './style.css'
|
// import './style.css'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
|
const app=createApp(App)
|
||||||
|
app.use(router)
|
||||||
|
app.mount('#app')
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const routes= [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'index',
|
||||||
|
component:()=>import('@/view/index.vue'),
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// path: '/a',
|
||||||
|
// name: 'indesx',
|
||||||
|
// component:()=>import('@/components/header.vue'),
|
||||||
|
// },
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
|
@ -61,7 +61,7 @@ button:focus-visible {
|
||||||
#app {
|
#app {
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,3 +77,7 @@ button:focus-visible {
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo"></div>
|
||||||
|
<div class="tab">
|
||||||
|
<div class="tab-li">首 页</div>
|
||||||
|
<div class="tab-li">商 品</div>
|
||||||
|
<div class="tab-li">商 户</div>
|
||||||
|
<div class="tab-li">订 单</div>
|
||||||
|
<div class="tab-li">财 务</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="rigth-li">泸县</div>
|
||||||
|
<div class="rigth-li">15:39:25</div>
|
||||||
|
<div class="rigth-li">2023.01.20</div>
|
||||||
|
<div class="rigth-li">关机</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { BorderBox1 } from '@dataview/datav-vue3';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import header from "@/components/header.vue"
|
||||||
|
// alert(5454)
|
||||||
|
console.log(header)
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.box {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #000C14;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
color: #B0C7D1;
|
||||||
|
height: 40px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 20vw;
|
||||||
|
background-color: red;
|
||||||
|
margin-right: 30px;
|
||||||
|
height: 40px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tab-li {
|
||||||
|
width: 120px;
|
||||||
|
background-color: #002641;
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
margin: 0 10px;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 10px white; //设置发光效果
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-right: 30px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.rigth-li {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,10 +1,18 @@
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
server: { // ← ← ← ← ← ←
|
server: { // ← ← ← ← ← ←
|
||||||
host: '0.0.0.0' // ← 新增内容 ←
|
host: '0.0.0.0' // ← 新增内容 ←
|
||||||
}
|
},
|
||||||
|
resolve:{
|
||||||
|
//别名配置,引用src路径下的东西可以通过@如:import Layout from '@/layout/index.vue'
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, 'src')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue