安装vue

打开vscode编辑器，按Ctrl+`组合键打开终端，在命令行中运行以下命令

npm create vue@latest

项目初始化完成，可执行以下命令：

cd vue-project --切换到项目目录
npm install   -- 安装依赖包
npm run dev  -- 运行项目

安装 Element Plus

npm install element-plus --save

自动导入Element Plus组件
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 配置文件中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

安装Element Plus 提供的一套常用的图标集合：

npm install @element-plus/icons-vue

注册所有图标

// main.ts// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

按需注册图标

// main.ts
import { HomeFilled, Platform} from '@element-plus/icons-vue'
const app = createApp(App)
app.component('HomeFilled', HomeFilled)
.component('Platform', Platform)

安装VueUse

npm i @vueuse/core

Element Plus使用VueUse自定义主题

import { useCssVar } from '@vueuse/core'const el = ref(null)
const color1 = useCssVar('--color', el)const elv = ref(null)
const key = ref('--color')
const colorVal = useCssVar(key, elv)const someEl = ref(null)
const color2 = useCssVar('--color', someEl, { initialValue: '#eee' })

安装unplugin-vue-router(基于文件的vue-router插件)

npm install -D unplugin-vue-router

你可以将 vue-router/auto 从VSCode的导入建议中排除，方法是将这个设置添加到 .vscode/settings.json : (编辑器当前项目的.vscode文件夹里新建一个settings.json)

{"typescript.tsdk": "node_modules/typescript/lib","typescript.preferences.autoImportFileExcludePatterns": ["vue-router/auto$"]
}

添加此插件后，启动开发服务器(通常为 npm run dev )以生成 typed-router.d.ts 类型的第一个版本，该版本应与 “moduleResolution”: “Bundler” 一起添加到 tsconfig.json 。它应该是这样的:

{"include": [// other files..."./typed-router.d.ts"],"compilerOptions": {// ..."moduleResolution": "Bundler",// ...}
}

然后，如果你有一个像 npm vue create 创建的 env.d.ts 文件，添加 unplugin-vue-router/client 类型:

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

如果你没有 env.d.ts 文件，你可以创建一个并添加unplugin-vue-router类型，或者你可以将它们添加到 tsconfig.json types 属性中:

{"compilerOptions": {// ..."types": ["unplugin-vue-router/client"]}
}

安装vite-plugin-vue-layouts布局插件

npm install -D vite-plugin-vue-layouts

如果你想要 virtual:generated-layouts 的类型定义，将 vite-plugin-vue-layouts/client 添加到 tsconfig 的 compilerOptions.types :

{"compilerOptions": {"types": ["vite-plugin-vue-layouts/client"]}
}

vue-router

import { createRouter } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from '~pages'const routes = setupLayouts(generatedRoutes)const router = createRouter({// ...routes,
});

unplugin-vue-router

import { createRouter } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'const router = createRouter({// ...extendRoutes: (routes) => setupLayouts(routes),
})

router/index.ts

//router/index.ts
import { createRouter, createWebHistory } from "vue-router/auto";
import { setupLayouts } from "virtual:generated-layouts";
import { routes } from "vue-router/auto-routes";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),extendRoutes: (routes) => setupLayouts(routes),
});console.log(routes);
export default router;

tsconfig.app.json

// tsconfig.app.json
{"extends": "@vue/tsconfig/tsconfig.dom.json","include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./typed-router.d.ts"],"exclude": ["src/**/__tests__/*"],"compilerOptions": {"composite": true,"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","baseUrl": ".","paths": {"@/*": ["./src/*"]},"moduleResolution": "Bundler","types": ["element-plus/global","unplugin-vue-router/client","vite-plugin-vue-layouts/client",]}
}

vite.config.ts

//vite.config.ts
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'import VueRouter from 'unplugin-vue-router/vite'
import Layouts from 'vite-plugin-vue-layouts';// https://vitejs.dev/config/
export default defineConfig({ssr: {noExternal: ['vue-router'],},plugins: [VueRouter({/* options */routesFolder: [{src: 'src/views',},],extendRoute(route){// if (route["node"].value.overrides.remove)//   {//     // Move metadata to parent, depends on your use cases//     if(route.parent)//        route?.parent.addToMeta(route["node"].value.overrides.meta);//     // Remove from routing table     //      route.delete();//   } //   else if(route.path !== '' && !route.path.includes("/") ){ //排除index.vue,排除文件夹if(route.path.includes(":")){// console.log("fullPath:  ",route.fullPath)// console.log(route.name.slice(0,route.name.lastIndexOf("/")));// console.log(route.fullPath.slice(route.fullPath.lastIndexOf("/")));route.path= route.name.slice(0,route.name.lastIndexOf("/"))+route.fullPath.slice(route.fullPath.lastIndexOf("/"))      }else{route.path = route.name;         }}//  console.log(route.name,"   path:",route.path,"    fullPath:",route.fullPath)}  }),vue(),Layouts(),AutoImport({// imports: [//   'vue',// ],resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],// relative paths to the directory to search for components.dirs: [],// search for subdirectoriesdeep: true,}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})