创建Vue3项目

Vite 安装

增加tailwindcss_Vite

增加 tailwindcss 增加 tailwindcss app/assets/css/tailwind.css nuxt.config.ts 验证 app/app.vue

设置自动导入

unplugin auto import vite.config.ts 验证 /src/views/sys/user/index.vue

Hooks

使用 Hooks /src/hooks/useAuth.ts /src/views/sys/user/index.vue

父子通信

父子通信 /src/views/demo/ParentItem.vue /src/views/demo/ChildItem.vue /src/App.vue

路由异步加载

路由异步加载 路由加载 /src/router/index.ts 菜单持久化 /src/store/auth.ts 左侧菜单渲染 /src/components/AppLayout/Sidebar/index.vue

使用Normalize

Normalize 安装 使用 /src/main.ts

AppLayout

基础布局 /src/components/AppLayout/indev.vue /src/components/AppLayout/Sidebar/index.vue /src/components/AppLayout/MainLayout.vue…

Navbar

Navbar /src/components/AppLayout/Navbar.vue /src/store/app.ts /src/components/MainLayout.vue

Sidebar

Sidebar /src/components/AppLayout/Sidebar/index.vue /src/components/AppLayout/Sidebar/SubMenu.vue /src/router/index.ts /src/components/AppLayout/MainLayout.vue

使用v-md-editor

v md editor 安装 /src/plugins/md editor.ts /src/main.ts 使用 /src/views/blog/article/edit.vue

安装ElementPlus

ElementPlust 安装 按需导入 vite.config.ts 验证 解决[Cannot find name 'ElMessage'.ts(2304)] 在 tsconfig.json 中增加"auto imports.d.ts"