使用的技术栈： vite + vue3 + pinia 

做的项目：https://www.xuexiluxian.cn/

一、创建项目

npm create vite@latest <项目名称>

二、安装router

    2.1

 npm install vue-router@4 -S

    2.2 在src目录新建router/index.js

    import { createRouter, createWebHistory } from "vue-router";
    import Home from "../views/Home.vue";
    const routes = [
      {
        path: "/",
        name: "Home",
        component: Home,
      },
      {
        path: "/about",
        name: "About",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/About.vue"),
      },
    ];
    const router = createRouter({
      history: createWebHistory(),
      routes,
    });
    export default router;  

三、unplugin-auto-import插件 和 @代表src目录

    3.1 

npm i unplugin-auto-import -D

    3.2 在vite.config.js中进行配置

        import { defineConfig } from 'vite'
        import vue from '@vitejs/plugin-vue';
        //引入插件
        import AutoImport from 'unplugin-auto-import/vite';
        const path = require('path');
        export default defineConfig({
          plugins: [
            vue(),
            //配置插件
            AutoImport({
                imports:['vue','vue-router']
            })
          ],
          resolve: {
            // 配置路径别名
            alias: {
              '@': path.resolve(__dirname, './src'),
            },
          },
        });

四、element-plus

    网址：https://element-plus.org/zh-CN/guide/design.html

    4.1 下载 

        npm install element-plus --save
        npm install -D unplugin-vue-components unplugin-auto-import

    4.2 配置修改vite.config.js

        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 path from 'path' 
        export default defineConfig({
          plugins: [
            vue(),
            //配置插件
            AutoImport({
              resolvers: [ElementPlusResolver()],
              imports:['vue','vue-router']
            }),
            Components({
              resolvers: [ElementPlusResolver()],
            }),
          ],
          resolve: {
            // 配置路径别名
            alias: {
              '@': path.resolve(__dirname, './src'),
            },
          },
        });

初始化页面

*{margin: 0;padding: 0;}
a{
  text-decoration: none;
}
ul{
  list-style: none;
}