新建vue项目和安装第三方库

安装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插件)

页面目录，默认值: ‘src/pages’。

npm install -D unplugin-vue-router

  Unplugin-vue-router将添加一个虚拟的 vue-router/auto 模块，该模块导出 vue-router 中的所有内容以及 unplugin-vue-router/runtime 的一些额外特性。建议避免在新项目中使用 vue-router/auto 。它被保留是为了与使用它的现有项目兼容，将来可能会被删除。

  你可以将 vue-router/auto 从VSCode的导入建议中排除，方法是将这个设置添加到 .vscode/settings.json : (编辑器当前项目的.vscode文件夹里新建一个settings.json)。这将确保VSCode不建议对导入使用 vue-router/auto 。或者，您也可以配置自动导入。

{
  "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布局插件

布局目录的路径，默认值: ‘src/layouts’。页面目录，默认值: ‘src/pages’。

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'
import { setupLayouts } from 'virtual:generated-layouts'
import { routes } from "vue-router/auto-routes";

const router = createRouter({
  // ...
  //extendRoutes: (routes) => setupLayouts(routes), //extendRoutes已启用
  routes: setupLayouts(routes),
})

router/index.ts

//router/index.ts
import { createRouter, createWebHistory } from "vue-router";
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), //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",
      "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({
  plugins: [
    VueRouter({
      /* options */
      routesFolder: [
        {
          src:  'src/pages',
        },
      ],
        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 subdirectories
  deep: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

src\App.vue
src\layouts\default.vue
src\layouts\other.vue

<template>
<router-view></router-view>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

src\pages\index.vue

<template>
   <el-button type="primary">Button</el-button>
</template>

<script setup lang="ts">

</script>

<style scoped>
</style>

src\main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

env.d.ts

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