轻松入门：Vite+Ts+Vue3+AntdV+Less环境搭建指南

利用 Vite、Vue3、Typescript、AntdV 和 Less 构建前端开发环境

环境准备

在开启您的前端开发之旅之前，确保您的电脑已配备以下软件：

• Node.js（推荐 v14.16.1 及以上版本）
• npm（推荐 v6 及以上版本）

安装依赖项

首先，在项目根目录下使用 npm 安装必要的依赖项：

npm install vite vue @vue/compiler-sfc typescript @types/node @types/vue @ant-design/vue less less-loader

初始化项目

使用 Vite 初始化一个新项目：

vite create vite-vue3-antd

配置 Vite

在 vite.config.js 文件中对 Vite 进行必要的配置：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import typescript from '@rollup/plugin-typescript';
import less from 'less';

export default defineConfig({
  plugins: [
    vue(),
    typescript({
      tsconfig: './tsconfig.json',
    }),
    less(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

配置 TypeScript

在 tsconfig.json 文件中对 TypeScript 进行必要的配置：

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react-jsx",
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "removeComments": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
    },
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
  ],
  "exclude": [
    "./node_modules",
  ],
}

配置 Antd Design Vue

在 main.js 文件中对 Antd Design Vue 进行必要的配置：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

运行项目

使用以下命令运行项目：

npm run dev

常见问题解答

• Q：如何更新 Vite、Vue3 或其他依赖项？

  • A：使用以下命令更新：npm update --save-dev vite vue typescript @ant-design/vue。

• Q：如何在项目中使用 Less 变量？

  • A：在 Less 文件中使用 @import "@/styles/variables.less" 导入变量文件。

• Q：如何配置 ESLint？

  • A：安装 ESLint 依赖项：npm install eslint --save-dev。创建 .eslintrc.js 文件并配置所需的规则。

• Q：如何调试 Vite 项目？

  • A：使用 Chrome DevTools 或其他调试工具，并确保已在 vite.config.js 中启用 sourceMap。

• Q：如何部署到生产环境？

  • A：使用以下命令构建项目：npm run build。部署到服务器并根据需要进行配置。