使用vite搭建vue+ts的web项目

1、初始化项目

1.1、执行命令，快速初始化

pnpm create vite 项目名称 --template vue-ts

1.2、启动项目

cd 项目路径 && pnpm install && pnpm run dev

2、集成配置（别名）

2.1、安装依赖

pnpm i @types/node --save-dev

2.2、修改tsconfig.json

{
    "compilerOptions": {
        "typeRoots": [
            "node_modules/@types",
            "src/types"
        ],
        "target": "ESNext",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "lib": ["ESNext", "DOM"],
        "baseUrl": "./",
        "paths": {
            "@": ["src"],
            "@/*": ["src/*"]
        },
        "skipLibCheck": true,
        "noEmit": true
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

2.3、修改vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": resolve(__dirname, "src")
        }
    },
    server: {
        port: 9000,
        proxy: {
            "/api": {
                target: "http://127.0.0.1:8000",
                changeOrigin: true,
                rewrite: (path: string) => path.replace(/^\/api/, "")
            }
        }
    }
})

3、代码风格质量统一

3.1、集成eslint

1）、安装

pnpm i eslint eslint-plugin-vue --save-dev

pnpm i @typescript-eslint/eslint-plugin --save-dev

2）、创建配置文件 .eslintrc.js

module.exports = {
    parser: 'vue-eslint-parser',

    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },

    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
    ],

    rules: {
        // override/add rules settings here, such as:
    }
};

3）、创建忽略文件

node_modules/
dist/
index.html

4）、命令行运行：修改package.json

{
    ...
    "scripts": {
        ...
        "eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件",
        "eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    }
    ...
}

3.2、集成prettier

1）、安装

pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

2）、创建配置文件：.prettierrc.js

module.exports = {
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用 tab 缩进，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号代替双引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾使用逗号
    trailingComma: 'all',
    // 大括号内的首尾需要空格 { foo: bar }
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'auto'
}

3）、修改.eslintrc.js

module.exports = {
    ...

    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'plugin:prettier/recommended'
    ],

    ...
};

4）、命令行运行：修改package.json

{
    ...
    "scripts": {
        ...
        "prettier:comment": "自动格式化当前目录下的所有文件",
        "prettier": "prettier --write"
    }
    ...
}

4、搭建目录结构

5、集成第三方依赖

5.1、集成vueuse

1）、安装

pnpm i @vueuse/core

5.2、集成vue-router

1）、安装

pnpm i vue-router --save

5.3、集成pinia

1）、安装

pnpm i pinia

5.4、集成axios

1）、安装

pnpm i axios

2）、持久化

2.1）、安装插件

pnpm i pinia-plugin-persistedstate

2.2）、引入

import { createPinia } from "pinia"
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"

const store = createPinia()

store.use(piniaPluginPersistedstate)

export default store

2.3）、使用

import { defineStore } from 'pinia' 
export const useStore = defineStore('main', { state: () => { 
    return { 
    someState: 'hello pinia', 
  } 
}, 
persist: true, //true即为存储，默认存储到localStorage，someState就是存储key值
})

5.5、集成css

1）、安装

pnpm add -D sass

5.6、集成element-plus

1）、安装

pnpm install element-plus

2）、引入

2.1）、完整引入（不推荐）

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

2.2）、按需引入（推荐）

（1）、安装插件

pnpm i unplugin-vue-components unplugin-auto-import

（2）、修改vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

3）、图标

3.1）、安装

pnpm install @element-plus/icons-vue

3.2）、使用

import { Edit } from "@element-plus/icons-vue"

5.7、集成js-cookie

1）、安装

pnpm i js-cookie --save
pnpm i @types/js-cookie --save

由于ESLint默认使用Espree进行语法解析，无法识别TypeScript语法，因此我们需要安装@typescript-eslint/parser替代默认的解析器

pnpm install @typescript-eslint/eslint-plugin

安装对应插件@typescript-eslint/eslint-plugin作为eslint默认规则的补充，提供了一些额外适用于ts语法的规则