🎉 init: 上传公共样式,下载依赖包

package.json

@@ -14,6 +14,7 @@
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
     "tdesign-vue-next": "^1.9.3",
+    "vite-plugin-mock": "^3.0.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

src/pages/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>111111111111111</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="less"></style>

src/router/index.js

@@ -1,23 +1,15 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "@/pages/index.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: HomeView
+      path: "/",
+      name: "home",
+      component: HomeView,
     },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
-    }
-  ]
-})
+  ],
+});
 
-export default router
+export default router;

src/style/index.css

@@ -0,0 +1,205 @@
+/**
+ * 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;
+}
+blockquote:before,
+q:before,
+blockquote:after,
+q:after {
+  content: '';
+  content: none;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+input,
+textarea,
+button {
+  font-family: inhert;
+  font-size: inherit;
+  color: inherit;
+}
+select {
+  text-indent: 0.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;
+}
+::-webkit-scrollbar {
+  width: 10px;
+}
+::-webkit-scrollbar-track {
+  width: 10px;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #e5e5e5;
+}
+.t-default-menu__inner .t-menu--scroll {
+  background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
+}
+.back-color {
+  background-color: #f5f7fb;
+  padding: 16px 24px;
+  height: calc(95vh - 64px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+a,
+a:link,
+a:visited,
+a:hover,
+a:active {
+  text-decoration: none;
+}
+.t-button--variant-text .t-button__text {
+  color: #0052d9;
+}
+.t-button--variant-text .t-button__text:hover {
+  color: #8799a3;
+}

src/style/index.less

@@ -0,0 +1,51 @@
+// 引入清除模式样式
+@import './reset.less';
+@import './variables.less';
+
+// 滚动条外观样式
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    width: 10px;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: @base-scrollbar-color;
+}
+
+.t-default-menu__inner .t-menu--scroll {
+    background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
+}
+
+// 主体背景颜色以及大小
+.back-color {
+    background-color: #f5f7fb;
+    padding: 16px 24px;
+    height: calc(95vh - 64px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+// 去除a标签默认样式
+a,
+a:link,
+a:visited,
+a:hover,
+a:active {
+    text-decoration: none;
+}
+
+// 改变文字按钮的颜色
+.t-button--variant-text .t-button__text {
+    color: @base-text-color;
+}
+
+// 改变文字按钮移入的颜色
+.t-button--variant-text .t-button__text:hover {
+    color: #8799a3;
+}

src/style/reset.css

@@ -168,16 +168,3 @@ pre {
   font-family: monospace, monospace;
   font-size: 1em;
 }
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-a,
-.green {
-  text-decoration: none;
-  color: hsl(160, 100%, 37%);
-  transition: 0.4s;
-  padding: 3px;
-}

src/style/reset.less

@@ -185,18 +185,4 @@
  pre {
      font-family: monospace, monospace;
      font-size: 1em;
- }
- #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
+ }

src/style/variables.less

@@ -0,0 +1,14 @@
+// 设置less全局变量
+
+// 左侧的菜单的宽度
+@base-menu-width: 260px;
+// 左侧菜单的背景颜色
+@base-menu-background: rgb(229, 229, 229);
+// 顶部导航高度b
+@base-tabbar-height: 50px;
+// 公用颜色
+@base-white-color: #fff;
+// text按钮的颜色
+@base-text-color: #0052d9;
+// 滚动条的颜色
+@base-scrollbar-color: rgb(229, 229, 229);

vite.config.js

@@ -1,9 +1,10 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
+import path from "path";
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import { viteMockServe } from 'vite-plugin-mock'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { viteMockServe } from "vite-plugin-mock";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,24 +12,26 @@ export default defineConfig({
     vue(),
     vueJsx(),
     viteMockServe({
-      mockPath: 'mock',
-      enable: true
-    })
+      mockPath: "mock",
+      enable: true,
+    }),
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
   },
   css: {
     preprocessorOptions: {
       less: {
         modifyVars: {
-          hack: `true; @import (reference) "${path.resolve('src/style/variables.less')}";`
+          hack: `true; @import (reference) "${path.resolve(
+            "src/style/variables.less"
+          )}";`,
         },
-        math: 'strict',
-        javascriptEnabled: true
-      }
-    }
-  }
-})
+        math: "strict",
+        javascriptEnabled: true,
+      },
+    },
+  },
+});