feat: ant-design-vue改为按需加载,同时改为动态导入ant-design-vue和@ant-design/icons-vue相关组件

components.d.ts

@@ -4,9 +4,21 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    ALayout: typeof import('ant-design-vue/es')['Layout']
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    UploadOutlined: typeof import('@ant-design/icons-vue')['UploadOutlined']
+    UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
+    VideoCameraOutlined: typeof import('@ant-design/icons-vue')['VideoCameraOutlined']
   }
 }
 

log.md

@@ -1,6 +1,9 @@
 # 待办事项
 - [x] `vue` `vue-router` `pinia` `axios` 库引入并封装
-- [ ] UI框架选取并引入
-- [ ] 头部布局组件
-- [ ] 底部布局组件
+- [x] UI框架选取并引入
+- [x] 头部布局组件
+- [x] 底部布局组件
 - [ ] 边侧栏布局组件
+- [ ] 登录页
+- [ ] 登录态相关处理
+- [ ] 权限路由设计

pnpm-lock.yaml

@@ -2258,7 +2258,7 @@ packages:
     dev: true
 
   /mime/1.6.0:
-    resolution: {integrity: sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=, tarball: mime/download/mime-1.6.0.tgz?cache=0&sync_timestamp=1636370946189&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fmime%2Fdownload%2Fmime-1.6.0.tgz}
+    resolution: {integrity: sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=, tarball: mime/download/mime-1.6.0.tgz}
     engines: {node: '>=4'}
     hasBin: true
     requiresBuild: true

src/App.vue

@@ -9,17 +9,9 @@
 </template>
 
 <style lang="less">
-@import './style/index.less';
-@import './style/ant-design/index.less';
+// @import './style/ant-design/index.less';
 </style>
 <style>
 @import './style/index.css';
-#app {
-  height: 100%;
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+@import './style/global.css';
 </style>

src/layouts/app/Footer.vue

@@ -1,9 +1,5 @@
 <template>
-  <LayoutFooter>
+  <a-layout-footer>
     Vite+Vue3+Typescript Template &copy;2021 Created by zhusiqing
-  </LayoutFooter>
+  </a-layout-footer>
 </template>
-<script lang="ts" setup>
-  import { LayoutFooter } from 'ant-design-vue'
-
-</script>

src/layouts/app/Header.vue

@@ -1,21 +1,45 @@
 <template>
-  <LayoutHeader>
-    <ul class="navs">
-      <li
-        v-for="nav in navs"
-        :key="nav.path"
-      >
-        <RouterLink :to="nav.path">
-          {{ nav.title }}
-        </RouterLink>
-      </li>
-    </ul>
-  </LayoutHeader>
+  <a-layout-header class="header">
+    <div class="left">
+      <ul class="navs">
+        <li
+          v-for="nav in navs"
+          :key="nav.path"
+        >
+          <RouterLink :to="nav.path">
+            {{ nav.title }}
+          </RouterLink>
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <a-dropdown placement="bottomCenter">
+        <a @click.prevent>
+          <a-avatar size="small">
+            <template #icon><user-outlined /></template>
+          </a-avatar>
+          <span class="username">小小了墨</span>
+        </a>
+        <template #overlay>
+          <a-menu @click="menuClickHandle">
+            <a-menu-item :key="EnumUserDropdown.center">
+              <span>个人中心</span>
+            </a-menu-item>
+            <a-menu-divider />
+            <a-menu-item :key="EnumUserDropdown.logout">
+              <span>退出登录</span>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </div>
+  </a-layout-header>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { RouterLink} from 'vue-router';
-import { LayoutHeader } from 'ant-design-vue';
+import { RouterLink } from 'vue-router';
+import { message } from 'ant-design-vue';
+import 'ant-design-vue/es/message/style/index.less';
 
 const navs = ref([
   {
@@ -31,20 +55,61 @@ const navs = ref([
     title: '错误页'
   }
 ])
+enum EnumUserDropdown {
+  center = 1,
+  logout = 2
+}
+interface menuClickParams {
+  key: number
+}
+
+const menuClickHandle = ({ key }: menuClickParams) => {
+  console.log(key);
+  switch (key) {
+    case EnumUserDropdown.center:
+      message.info('个人中心')
+      break
+    case EnumUserDropdown.logout:
+      message.info('退出登录')
+      break
+    default:
+      break;
+  }
+}
 </script>
-<style scoped>
+<style lang="less" scoped>
+@color: rgba(255, 255, 255, 0.65);
+@color-hover: var(--color-primary);
+.header {
+  display: flex;
+  justify-content: space-between;
+  .right {
+    a {
+      padding: 5px 0;
+      color: @color;
+      &:hover {
+        color: @color-hover;
+      }
+    }
+    .username {
+      margin-left: 10px;
+    }
+  }
+}
+
 .navs {
   display: flex;
   list-style: none;
   margin: 0;
+  a {
+    padding: 0 10px;
+    text-decoration: none;
+    color: var(--color-primary);
+  }
+  a:hover {
+    text-decoration: underline;
+    color: var(--color-a-active);
+  }
 }
-a {
-  padding: 0 10px;
-  text-decoration: none;
-  color: var(--color-primary);
-}
-a:hover {
-  text-decoration: underline;
-  color: var(--color-a-active);
-}
+
 </style>

src/layouts/app/Sider.vue

@@ -1,11 +1,15 @@
 <template>
-  <LayoutSider
+  <!-- LayoutSider -->
+  <a-layout-sider
     breakpoint="lg"
     collapsed-width="80"
     @collapse="onCollapse"
     @breakpoint="onBreakpoint"
   >
-    <div class="logo">
+    <div
+      class="logo"
+      @click="toHomeHandle"
+    >
       LOGO
     </div>
     <a-menu
@@ -30,13 +34,14 @@
         <span class="nav-text">nav 4</span>
       </a-menu-item>
     </a-menu>
-  </LayoutSider>
+  </a-layout-sider>
 </template>
 <script lang="ts" setup>
-  import { LayoutSider} from 'ant-design-vue'
-  import { UserOutlined, VideoCameraOutlined, UploadOutlined } from '@ant-design/icons-vue';
   import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
   const selectedKeys = ref<string[]>(['4'])
+  const router = useRouter()
+
   const onCollapse = (collapsed: boolean, type: string) => {
     console.log(collapsed, type);
   };
@@ -44,6 +49,9 @@
   const onBreakpoint = (broken: boolean) => {
     console.log(broken);
   };
+  const toHomeHandle = () => {
+    router.push('/')
+  }
 </script>
 
 <style lang="less" scoped>
@@ -54,5 +62,6 @@
   text-align: center;
   background-color: #fff;
   font-weight: 600;
+  cursor: pointer;
 }
 </style>

src/layouts/app/index.vue

@@ -1,20 +1,19 @@
 <template>
-  <Layout class="layout">
+  <a-layout class="layout">
     <AppSider />
-    <Layout class="layout-main">
+    <a-layout class="layout-main">
       <AppHeader />
-      <LayoutContent>
+      <a-layout-content class="layout-content">
         <div class="content">
           <RouterView />
         </div>
-      </LayoutContent>
+      </a-layout-content>
       <AppFooter />
-    </Layout>
-  </Layout>
+    </a-layout>
+  </a-layout>
 </template>
 <script lang="ts" setup>
 import { RouterView } from 'vue-router';
-import { Layout, LayoutContent } from 'ant-design-vue';
 import AppHeader from './Header.vue';
 import AppSider from './Sider.vue'
 import AppFooter from './Footer.vue';
@@ -27,8 +26,11 @@ import AppFooter from './Footer.vue';
   .layout-main {
     background-color: #f0f2f5;
   }
+  .layout-content {
+    overflow: auto;
+    padding: 24px;
+  }
   .content {
-    margin: 24px;
     min-height: 100%;
     background-color: #fff;
   }

src/pages/Home/index.vue

@@ -2,9 +2,12 @@
   <div class="home">
     home page
     <p>{{ str }}</p>
-    <button @click="copyHandle">
+    <a-button
+      type="primary"
+      @click="copyHandle"
+    >
       复制
-    </button>
+    </a-button>
   </div>
 </template>
 <script lang="ts" setup>

src/style/ant-design/index.less

@@ -1 +1,3 @@
-@import 'ant-design-vue/dist/antd.less';
+// TODO: 改为按需加载，但是目前样式无法覆盖
+// @import 'ant-design-vue/dist/antd.less';
+// @primary-color: #a1c4fd;

src/style/global.css

@@ -0,0 +1,14 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  min-height: 700px;
+}
+#app {
+  height: 100%;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}

src/style/index.less

@@ -1,5 +0,0 @@
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}

vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
       less: {
         // 解决antd 引入less报错
         javascriptEnabled: true,
+        // TODO: 改为按需加载，但是目前样式无法覆盖
         lessOptions: {
           modifyVars: {
             'primary-color': '#a1c4fd'
@@ -29,10 +30,21 @@ export default defineConfig({
       }
     ]
   },
+  build: {
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true
+      }
+    }
+  },
   plugins: [
     vue(),
     ViteComponents({
-      resolvers: [AntDesignVueResolver()],
+      resolvers: [AntDesignVueResolver({
+        importStyle: true,
+        resolveIcons: true
+      })],
       dts: true
     })
   ]