Vue3 + Vite + Typescript 项目快速搭建

[jtwang7]

Vue3 + Vite + Typescript 项目快速搭建

✅ 通过 Vite 搭建 Vue3 + Typescript

yarn create vite
// ...
// 输入你的项目名
// 选择 Vue + ts

✅ 进入项目目录，安装依赖

// 初始化依赖
yarn

// 安装 vuex / vue-router / sass / axios / vue-element-plus 等
yarn add vue-router@4 vuex@next element-plus axios --save

✅ 配置根路径别名 修改 vite.config.ts 文件配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'; // 若出现“找不到模块“path”或其相应的类型声明”，安装 @type/node 即可

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  // 设置路径别名
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
      }
    ]
  }
})

修改 ts.config.json 文件配置

{
    "compilerOptions": {
        "target": "esnext",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["esnext", "dom"],
        // 路径配置
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "exclude": ["node_modules"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

✅ 配置 sass 全局样式

• webpack建立的项目，使用sass需要 node-sass 和 sass-loader
• vite 项目建立 vue 项目，直接安装 sass 依赖包就可以直接使用

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 路径别名
    alias: [
      {
        find: "@",
        replacement: path.resolve("./src"),
      },
    ],
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 多个文件用 ' ; ' 分隔
        additionalData: `@import "@/styles/global.scss";`,
      },
    },
  },
});