Vue3.4+TS+eslint9+Prettier+Iconify+Tailwind CSS

1. 初始化项目 （传送门)

1. 首先，在你希望安装项目的磁盘路径下，打开控制台并输入以下命令开始创建一个 Vite 项目：

npm create vite
or
yarn create vite

1. 这里我们选择使用 Yarn 进行项目初始化： (传送门)

E:\xxx\pc>yarn create vite
yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "commitizen > cz-conventional-changelog > @commitlint/load > cosmiconfig-typescript-loader@5.0.0" has unmet peer dependency "@types/node@*".
warning "commitizen > cz-conventional-changelog > @commitlint/load > cosmiconfig-typescript-loader@5.0.0" has unmet peer dependency "typescript@>=4".
[4/4] Building fresh packages...

success Installed "create-vite@5.2.3" with binaries:
      - create-vite
      - cva
√ Project name: ... project3 (你的项目名称
√ Select a framework: » Vue  (选择Vue
√ Select a variant: » TypeScript （选择TypeScript

Scaffolding project in E:\javascript\pc\project3...

Done. Now run:

  cd project3   ( 根据提示切换到项目的路径
  yarn          ( 安装依赖
  yarn dev      ( 运行项目 也可以先不运行

Done in 16.63s.

当然，也可以在 VS Code 里面操作。 将项目文件夹拖到 VS Code，然后右键项目目录并选择“在终端中打开”，输入 yarn dev 即可运行项目。

2. Eslint

1. 执行以下命令创建 ESLint 配置：

pnpm create @eslint/config 
# 或 
npm init @eslint/config@latest

1. 执行情况如下：

PS E:\xxx\pc\project3> pnpm create @eslint/config
.../19015bf73dc-4884                     |  +11 +
.../19015bf73dc-4884                     | Progress: resolved 11, reused 8, downloaded 3, added 11, done
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint@9.x, globals, @eslint/js, typescript-eslint, eslint-plugin-vue
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm
☕️Installing...

1. 修改eslint.config.js文件

import globals from 'globals' //https://eslint.org/docs/latest/use/configure/language-options
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint' //https://typescript-eslint.io/getting-started/
import pluginVue from 'eslint-plugin-vue' //https://eslint.vuejs.org/user-guide/
import vueEslintParser from 'vue-eslint-parser' // vue文件解析器

//关闭所有不必要的或可能与Prettier冲突的规则。https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#configuration-new-eslintconfigjs
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default [
  {
    languageOptions: {
      globals: { ...globals.browser, ...globals.node },
      parser: vueEslintParser, // 使用vue解析器，这个可以识别vue文件
      parserOptions: {
        ecmaVersion: 'latest',
        parser: tseslint.parser, // 在vue文件上使用ts解析器
        sourceType: 'module',
      },
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  eslintPluginPrettierRecommended,
  {
    rules: {
      // 'vue/no-unused-vars': 'error',
      'prettier/prettier': [
        'error',
        {
          // endOfLine: "auto"
        },
      ],
    },
  },
]

3. Prettier

1. 安装相关依赖：

pnpm add prettier eslint-plugin-prettier eslint-config-prettier -D

1. 创建配置文件

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

1. 修改 .prettierrc文件如下

{
    "printWidth": 80, 
    "tabWidth": 2, 
    "useTabs": false, 
    "semi": false, 
    "singleQuote": true, 
    "quoteProps": "as-needed",
    "jsxSingleQuote": false, 
    "trailingComma": "es5", 
    "bracketSpacing": true, 
    "arrowParens": "always", 
    "rangeStart": 0, 
    "requirePragma": false, 
    "insertPragma": false,
    "proseWrap": "always",
    "htmlWhitespaceSensitivity": "css",
    "endOfLine": "auto"
}

4. Iconify

1. 安装相关依赖：

pnpm add unplugin-vue-components unplugin-auto-import unplugin-icons @iconify/json @iconify/vue -D

1. 配置vite.config.ts,如下

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 IconsResolver from 'unplugin-icons/resolver' // 集成图标集
import Icons from 'unplugin-icons/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  AutoImport({
    imports: ["vue", "vue-router", "pinia"],
    dirs: ["src/utils/**", "src/stores/modules/**", "src/hooks/**"],
    dts: "src/auto-import/imports.d.ts",
    eslintrc: {
      enabled: true,
      filepath: "src/auto-import/eslintrc-auto-import.json",
    },
  }),
  Components({
    dirs: ["src/components"],
    dts: "src/auto-import/components.d.ts",
    resolvers: [
      // 集成图标集
      IconsResolver({
        prefix: 'icon' // 私有前缀
      })
    ]
  }),
  Icons({
    autoInstall: true // 自动安装所需图标集
  })],
})

1. 使用图标

通过 Iconify图标库 找到你需要的图标，并点击复制图标名称。例如：material-symbols:play-circle-outline。

1. 在组件中使用： <icon-拼接刚刚复制的icon名称 />

<icon-material-symbols:play-circle-outline />

1. 效果：

5. Tailwind CSS

1. 安装 Tailwind CSS 及其相关依赖：

pnpm add tailwindcss postcss autoprefixer -D

1. 初始化 Tailwind CSS:

npx tailwindcss init -p

1. 配置 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

1. 创建 Tailwind CSS 样式文件 src/style/tailwind.css（目录结构可自行决定），内容如下：

@tailwind base; 
@tailwind components; 
@tailwind utilities;

1. 在 main.ts 文件中导入 Tailwind CSS 文件：

1. 效果展示：