布局完成

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     '@typescript-eslint'
   ],
   rules: {
+    'vue/multi-word-component-names': 'off', // 关闭命名规则
     semi: [2, 'never'], // 禁止尾部使用分号“ ; ”
     'no-var': 'error', // 禁止使用 var
     indent: ['error', 2], // 缩进2格

index.html

@@ -11,3 +11,10 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+<style>
+  html,body,#app{
+      margin: 0px;
+      padding: 0px;
+      height: 100%;
+  }
+</style>

package.json

@@ -5,10 +5,12 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "vite eslint"
   },
   "dependencies": {
     "axios": "^0.26.1",
+    "element-plus": "^2.1.9",
     "save": "^2.4.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",

src/App.vue

@@ -3,19 +3,9 @@
 </script>
 
 <template>
-  <div>
-    <img alt="Vue logo" src="./assets/logo.png">
-    <router-view />
-  </div>
+  <router-view />
 </template>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>

src/components/HelloWorld.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

src/layout/Base.vue

@@ -0,0 +1,12 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+// import { ref } from 'vue'
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/layout/Index.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-container class="common-layout">
+    <el-header>
+      <Header />
+    </el-header>
+    <el-main>
+      <router-view />
+    </el-main>
+    <el-footer>Footer</el-footer>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import Header from '@/layout/header/Header.vue'
+
+</script>
+
+<style scoped lang="scss">
+.common-layout{
+  height: 100%;
+}
+</style>

src/layout/header/Header.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-menu
+    :default-active="activeIndex"
+    class="el-menu-demo"
+    mode="horizontal"
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+    @select="handleSelect"
+  >
+    <el-menu-item index="1">股票情绪</el-menu-item>
+    <el-sub-menu index="2">
+      <template #title>测试菜单</template>
+      <el-menu-item index="2-1">item one</el-menu-item>
+      <el-menu-item index="2-2">item two</el-menu-item>
+      <el-menu-item index="2-3">item three</el-menu-item>
+      <el-sub-menu index="2-4">
+        <template #title>item four</template>
+        <el-menu-item index="2-4-1">item one</el-menu-item>
+        <el-menu-item index="2-4-2">item two</el-menu-item>
+        <el-menu-item index="2-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="3" disabled>无用菜单</el-menu-item>
+  </el-menu>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const activeIndex = ref('1')
+
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/main.ts

@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
 import App from '@/App.vue'
 
-import router from '@/router/index'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
+import router from '@/router/index'
 import { store, key } from '@/store/index'
 
-createApp(App).use(router).use(store, key).mount('#app')
+createApp(App).use(ElementPlus).use(router).use(store, key).use(ElementPlus).mount('#app')

src/router/index.ts

@@ -1,18 +1,21 @@
-import { createRouter, createWebHashHistory, RouteRecord, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
-import Home from '../views/tst/Home.vue'
+import Layout from '@/layout/Index.vue'
 
 const routes: Array<RouteRecordRaw> =
     [
       {
         path: '/',
-        name: 'Home',
-        component: Home
-      },
-      {
-        path: '/about',
-        name: 'About',
-        component: () => import('../views/tst/About.vue')
+        name: 'Layout',
+        component: Layout,
+        redirect: '/chg',
+        children: [
+          {
+            path: 'chg',
+            name: 'StockChg',
+            component: () => import('@/views/stock/chg/Index.vue')
+          }
+        ]
       }
     ]
 

src/views/stock/chg/Index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    asd
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index'
+}
+</script>
+
+<style scoped>
+
+</style>

vite.config.ts

@@ -1,25 +1,24 @@
-import {defineConfig} from 'vite'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import {resolve} from "path";
+import { resolve } from 'path'
 import eslintPlugin from 'vite-plugin-eslint'
 
-// https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(),
-        eslintPlugin({
-            include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
-        })],
-    server: {
-        host: '0.0.0.0',
-        port: 3000,
-        open: true
-    },
-    resolve: {
-        alias: [
-            {
-                find: '@',
-                replacement: resolve(__dirname, 'src')
-            }
-        ]
-    }
+  plugins: [vue(),
+    eslintPlugin({
+      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
+    })],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+    open: true
+  },
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: resolve(__dirname, 'src')
+      }
+    ]
+  }
 })