Vue3创建项目(Vite)

创建项目

npm create vite@latest my-vue-app --template vue-ts

安装常用包

TIP：复制粘贴如下所有命令，一次性全部安装

## 安装pinia和Vue路由
npm i pinia vue-router@4 --save

## 安装sass、ESLint、prettier（-D表示开发依赖）
npm i -D sass sass-loader eslint prettier
 
## 安装兼容插件
## vite-plugin-eslint 用于适配vite
## eslint-config-prettier用于关闭eslint中与prettier冲突的规则
## eslint-plugin-prettier赋予eslint用prettier格式化代码的能力
npm i vite-plugin-eslint eslint-config-prettier eslint-plugin-prettier --save-dev

## 安装自动按需引入插件
## unplugin-vue-components 内置了市面上常见的所有ui库解析器，用于实现UI组件的自动按需导入，同时也可按需引入所有自定义组件；
## unplugin-auto-import 用于实现 Vue API 的自动按需引入；
npm i unplugin-vue-components unplugin-auto-import -D

## 安装SVG雪碧图生成插件
npm i vite-plugin-svg-icons -D

## 安装stylelint，以格式化scss
npm install --save-dev stylelint stylelint-config-prettier-scss stylelint-config-standard-scss

配置 ESLint

初始化ESLint配置

npx eslint --init

配置选项：

# 需要安装 @eslint/create-config，是否继续(Y)？
? Need to install the following packages:  @eslint/create-config
Ok to proceed? (y) 

# 如何使用ESLint?
? How would you like to use ESLint? 
❯ To check syntax and find problems (检查语法并发现问题)

# 项目使用什么类型的模块?
? What type of modules does your project use?
❯ JavaScript modules (import/export)(JavaScript 模块（导入/导出）)

# 使用哪个框架？
? Which framework does your project use?
❯ Vue.js

# 是否使用Typescript?
? Does your project use TypeScript? Yes

# 你的代码在哪里运行？（按 <space> 选择，<a> 切换所有，<i> 反转选择）
? Where does your code run?
✔ Browser
✔ Node

# 如何为您的项目定义一种风格?
? How would you like to define a style for your project?
❯ Answer questions about your style(回答有关您的风格的问题)

# 配置文件采用什么格式？
? What format do you want your config file to be in?
❯ JavaScript

# 使用什么样式的缩进？
? What style of indentation do you use? … 
❯ Tabs

# 用什么引号来表示字符串？ …
? What quotes do you use for strings?
❯ Double（双引号）

# 你使用什么行尾？
？What line endings do you use?
❯ Unix

# 需要分号吗？
? Do you require semicolons? Yes

# 您想现在安装它们吗？
？Would you like to install them now? Yes

# 选择包管理器
? Which package manager do you want to use?
❯ npm

配置 package.json

（可选）添加lint

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx,vue,ts,tsx}\" --fix"
},

配置vite.config.ts

从已有项目复制 自动按需导入、SVG雪碧图等插件配置；可参照如下配置：

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

// 自定义组件按需自动导入插件
import Components from "unplugin-vue-components/vite";

// 该插件内置了市面上常见的UI库解析器，用于辅助自动按需引入
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// Vue相关的库和API的自动按需引入
import AutoImport from "unplugin-auto-import/vite";

// 生成SVG雪碧图;
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),

        // 自定义组件自动按需引入
        Components({
            // dirs 指定组件所在位置，默认为 src/components
            // 可以让我们使用自己定义组件的时候免去 import 的麻烦
            dirs: ["src/components"], // 按需加载的文件夹
            // 配置需要将哪些后缀类型的文件进行自动按需引入，'vue'为默认值
            extensions: ["vue"],
            // 解析组件，这里以 Element Plus 为例
            resolvers: [ElementPlusResolver()],
            // dts：true 或者为 'src/components.d.ts'时，则会自动生成components.d.ts
            dts: true,
            // 遍历子目录
            deep: true,
        }),

        // Vue框架本身相关库、API自动按需引入
        AutoImport({
            imports: ["vue", "vue-router", "pinia"],
        }),

        // 生成SVG雪碧图(在项目运行时就生成所有图标,只操作一次dom；内置缓存,仅当文件被修改时才会重新生成)
        createSvgIconsPlugin({
            // 指定要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), "src/icons")],
            // 执行icon name的格式t
            symbolId: "icon-[dir]-[name]",
        }),
    ],
});

配置.eslintrc.cjs

1.0> Vue3引入了 defineProps、defineEmits、defineExpose、withDefaults 编译器宏，但 ESLint 可能会提示这些编译器宏函数未定义，需要进行配置；

2.0> 在 extends 中加入 plugin:prettier/recommended，告知ESLint使用prettier的规则格式化代码；

3.0> 配置解析器，使ESLint以正确的方式解析Vue和TS

注：如下所有被注释的选项，都是需要添加的配置

"env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "vue/setup-compiler-macros": true, // 支持 Vue 编译宏
},
// 为ESLint扩展其它配置文件 
extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended", // 使用prettier的规则格式化代码
    "./.eslintrc-auto-import.json", // 使eslint识别自动引入的组件和API
],
parser: "vue-eslint-parser",  // 配置ESLint解析器
parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser", // 配置JS解析器
    sourceType: "module",
},
"rules": {
    // 此处请自行添加你自己的规则
    // 复制已有项目的规则配置
} 

配置prettier.config.cjs

直接复制已有项目的配置即可

配置 .vscode > settings.json

直接复制已有项目的配置即可

配置 .vscode > .stylelintrc.json

直接复制已有项目的配置即可

重启Vscode

修改prettier.config.cjs配置后，可能会发生eslint和prettier再次冲突，或自动格式化未生效，这是因为vscode插件缓存没有及时更新，重启下vscode即可；

命令详解

# 构建应用
npm run build

# 在本地启动一个静态服务器预览dist文件夹中的程序
npm run preview

项目测试

执行 npm run lint 命令，检查代码和配置的正确性；如果配置有错误，可能导致Eslint、prettier等插件无法正常运行；

注意：默认src/vite-env.d.ts文件中的代码违反了TS的基本规则，因此会报错；手动添加注释屏蔽错误即可：

/// <reference types="vite/client" />
declare module "*.vue" {
    import type { DefineComponent } from "vue";

    // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

设置项目路径别名

配置 vite.config.ts

resolve: {
    alias: {
        "@": join(__dirname, "src"),
    },
},

配置 tsconfig.json

"compilerOptions": {
  "baseUrl":"",
  "paths": {
      "@/*": ["src/*"]
}

配置环境变量自动提示

……

Webpack 迁移 Vite

1.0> Vite不支持通过 require 导入，详见Vite静态资源处理；

2.0> 引入资源时，为资源添加?raw后缀，表明将资源作为字符串引入；

import shaderString from './shader.glsl?raw'