新建一个项目从这里快速起步，虽然最好是做个模板，但是懒得搞了。

另外一些通用库可以参考前端库收藏

该试试 Nuxt 了

大型一些的项目（比如这个博客），还是用 Nuxt 比较好，方便管理很多。小项目应该就不需要了。

pnpm dlx nuxi init . --packageManager pnpm --force
pnpm add unocss @unocss/reset @vueuse/core
pnpm dlx nuxi module add vueuse
pnpm dlx nuxi module add unocss
pnpm dlx nuxi module add eslint

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  modules: ["@vueuse/nuxt", "@unocss/nuxt", "@nuxt/eslint"],
  css: ["@unocss/reset/tailwind.css"],
});

Vue 项目起手式 V1.0

基础包

pnpm create vite . -t vue-ts
pnpm add @vueuse/core
pnpm add -D unocss @unocss/reset
pnpm add -D eslint @eslint/js eslint-plugin-vue typescript typescript-eslint @types/node eslint-plugin-unused-imports eslint-config-prettier

图标

## pnpm add -D @iconify-json/mdi
## pnpm add -D @iconify-json/lucide

路由

pnpm add vue-router@next

TSX

pnpm add -D @vitejs/plugin-vue-jsx

字体

pnpm add @fontsource-variable/noto-sans-sc

UnoCSS 额外配置

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import UnoCSS from "unocss/vite";

export default defineConfig({
  plugins: [UnoCSS(), vue()],
});

// uno.config.ts
import {
  defineConfig,
  presetIcons,
  presetUno,
  transformerDirectives,
} from "unocss";

export default defineConfig({
  presets: [presetUno(), presetIcons()],
  transformers: [transformerDirectives()],
});

// main.ts
import "virtual:uno.css";
import "@unocss/reset/tailwind.css";

vue-router 额外配置

// router.ts
import { createRouter, createWebHistory } from "vue-router";

export const router = createRouter({
  history: createWebHistory(),
  routes: [],
});

// main.ts
import { router } from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

eslint 额外配置

// eslint.config.js

// @ts-check
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import pluginUnusedImports from "eslint-plugin-unused-imports";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
  },

  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  {
    files: ["**/*.vue"],
    languageOptions: { parserOptions: { parser: tseslint.parser } },
  },
  {
    ignores: ["**/node_modules/**", "**/dist/**", "**/src-tauri/**"],
  },
  {
    rules: {
      "vue/singleline-html-element-content-newline": "off",
      "vue/multiline-html-element-content-newline": "off",
      "vue/html-self-closing": "off",
    },
  },
  {
    plugins: {
      "unused-imports": pluginUnusedImports,
    },
    rules: {
      "unused-imports/no-unused-imports": "error",
    },
  },
  eslintConfigPrettier,
];

alias 额外配置

pn add -D @types/node

// vite.config.ts
import path from "path";
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

// tsconfig.app.json
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
}

tsx 额外配置

// vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
  plugins: [vue(), vueJsx()],
});

// tsconfig.app.json
{
  "include": ["src/**/*.tsx"],
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue"
  }
}

字体额外配置

//main.ts
import "@fontsource-variable/noto-sans-sc";

<style>
  body {
    font-family: "Noto Sans SC Variable", sans-serif;
  }
</style>