cao

package.json

@@ -9,10 +9,15 @@
     "preview": "vite preview"
   },
   "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": {
     "@vitejs/plugin-vue": "^4.5.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
     "vite": "^5.0.0"
   }
 }

src/App.vue

@@ -1,30 +1,12 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
+<script setup lang="ts">
 </script>
-
 <template>
-  <div>
-    <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" />
+  <router-view></router-view>
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+ 
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+</style>

src/components/HelloWorld.vue

@@ -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>

src/components/header.vue

@@ -0,0 +1,7 @@
+<template>
+    <div style="background-color: red; height: 100px; width: 750px;">
+        sadsasdfsdf
+    </div>
+</template>
+<script setup>
+</script>

src/main.js

@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
-import './style.css'
+// import './style.css'
 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')

src/router/index.js

@@ -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

src/style.css

@@ -61,7 +61,7 @@ button:focus-visible {
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
   text-align: center;
 }
 
@@ -77,3 +77,7 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+*{
+  margin: 0;
+  padding: 0;
+}

src/view/index.vue

@@ -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>

vite.config.js

@@ -1,10 +1,18 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   server: {				// ← ← ← ← ← ←
     host: '0.0.0.0'	// ← 新增内容 ←
-  }	
+  },
+  resolve:{   
+    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+
 })