写给我自己的项目搭建

其实是我自己写下来防忘记（逃
每次看文章都是配置循序渐进，便于理解。对于我这样的懒人，写一次就不能浪费了，每次直接复制多香
总体配置：
vue3 + element-plus + vite + pinia + js + windiCss + pnpm
这是一篇让我入门的文章参考链接感谢大佬
自动按需导入：几个插件，让你的Vue代码 “学会” 自动按需引入 - Code World (codetd.com)

官网链接

vue3新官网
Vue.js (vuejs.org)
element-plus
Button 按钮 | Element Plus (gitee.io)
windicss中文（组件API可以就看tailwind官网）
开始 {#getting-started} | Windi CSS
vite
开始 | Vite 官方中文文档 (vitejs.dev)
图标（不会用可以搜搜unplugin-icons/vite怎么用）
Icônes (icones.netlify.app)

首先是vite搭建

npm init vue@latest
然后把vue-router和pinia都给勾上，其他的就随意了
他可以把目录结构给你一块儿生成了

接着就安装一下：
pnpm install

安装依赖包

运行时依赖：element-plus

pnpm install element-plus

注：会有一个警告，那个css的预处理警告可以不用管，因为要用windiCss

开发时依赖：按需加载

pnpm i unplugin-icons unplugin-vue-components unplugin-element-plus vite-plugin-style-import consola -D

unplugin-vue-components 这插件是真好用啊wwwww
具体感兴趣可以去搜搜，他会自动给你导组件，不用import了

windicss

pnpm install vite-plugin-windicss
在main.js中添加windicss

// 以下为windiCss的引入
// windicss layers
import "virtual:windi-base.css";
import "virtual:windi-components.css";
import "virtual:windi-utilities.css";

创建windi.config.js

import { defineConfig } from "windicss/helpers";

export default defineConfig({
  darkMode: "class",
  // https://windicss.org/posts/v30.html#attributify-mode
  attributify: true,
});

vite.config.js

import { fileURLToPath, URL } from "url";

import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/vite";
import WindiCSS from "vite-plugin-windicss";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import ElementPlus from "unplugin-element-plus/vite";
import { createStyleImportPlugin, ElementPlusResolve } from "vite-plugin-style-import";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
    Components({
      dts: true,
      resolvers: [
        // auto import icons
        // https://github.com/antfu/vite-plugin-icons
        IconsResolver({}),
        ElementPlusResolver(),
        // createStyleImportPlugin()
      ],
    }),
    // https://github.com/antfu/vite-plugin-icons
    Icons({
      compiler: "vue3",
      autoInstall: true,
    }),
    ElementPlus({}),
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

然后就可以启动试试了！！pnpm dev

vue3 懒人项目搭建