Vue3+TS项目实战：从零搭建企业级开发环境-CSDN博客

1. 从零开始：项目初始化与Vite的威力

很多刚接触Vue3和TypeScript的朋友，一上来就被各种配置搞得头大。别慌，我刚开始也这样，感觉像在拼一个没有图纸的乐高。但后来我发现，只要第一步走对了，后面就顺畅多了。今天我就带你从零开始，手把手搭建一个真正能在企业里用的开发环境，把那些坑都提前填平。

咱们的第一步，就是创建项目。现在最主流、最爽的工具就是 Vite。它可不是一个简单的脚手架，而是一个极速的开发服务器和构建工具。我实测下来，它的启动速度和热更新速度，比传统的Webpack快了一个数量级，尤其是在项目文件多的时候，那种“秒开”的感觉，用过就回不去了。

创建命令非常简单，打开你的终端，在你想放项目的目录下，执行：

pnpm create vite

这里我强烈推荐使用 pnpm，它比 npm 和 yarn 更快，磁盘空间占用也更少，非常适合管理现代前端项目的依赖。执行命令后，它会交互式地让你选择项目名称、框架和变体。我们依次选择：

Project name: 输入你的项目名，比如 my-vue3-app。
Select a framework: 用上下箭头选择 Vue。
Select a variant: 选择 TypeScript。

然后，按照提示进入项目目录并安装依赖：

cd my-vue3-app
pnpm install

依赖安装完成后，用 pnpm run dev 启动项目。你会看到一个极简的Vue3欢迎页面。但这里有个小细节可以优化：每次启动后都要手动复制本地地址到浏览器打开，有点麻烦。我们可以让它自动打开。

打开 package.json 文件，找到 scripts 部分，把 dev 脚本修改一下：

{
  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  }
}

看，只是加了一个 --open 参数。下次再运行 pnpm run dev，浏览器就会自动弹出并打开你的应用了。这种小优化能提升不少日常开发的幸福感。

项目跑起来了，但先别急着写业务代码。一个企业级项目的基石是稳定和规范，接下来我们要做的，就是为这个“毛坯房”安装上坚固的“门窗”和“水电”——也就是代码规范工具链。

2. 打造代码卫士：ESLint + Prettier 深度配置

代码风格不统一，是团队协作的噩梦。你写分号，他不写；你用单引号，他用双引号。最后合并代码时，满屏的格式改动，真正的逻辑变更反而被淹没了。所以，我们必须在一开始就引入“代码卫士”：ESLint 负责检查代码质量和潜在错误，Prettier 负责无脑格式化代码风格。让机器去处理格式，人专注于逻辑。

2.1 配置ESLint：你的代码质量巡检员

首先安装 ESLint 到开发依赖：

pnpm install eslint -D

然后初始化ESLint配置。这里我建议使用交互式命令，它能帮你打好基础：

npx eslint --init

执行后，它会问你几个问题，我的选择供你参考：

How would you like to use ESLint? To check syntax, find problems, and enforce code style
What type of modules does your project use? JavaScript modules (import/export)
Which framework does your project use? Vue.js
Does your project use TypeScript? Yes
Where does your code run? Browser (按空格键选中)
What format do you want your config file to be in? JavaScript
Would you like to install them now? Yes (它会自动安装需要的包)

初始化完成后，会生成一个 .eslintrc.cjs 文件。但这个默认配置对于 Vue3 + TS 项目还不够完善，我们需要手动增强它。下面是我在多个项目中打磨后的一个强化版配置，你可以直接替换：

// .eslintrc.cjs
module.exports = {
  // 运行环境
  env: {
    browser: true,
    es2021: true,
    node: true // 增加node环境，避免配置文件里的`module`等报错
  },
  // 继承的规则集：顺序很重要，后面的会覆盖前面的
  extends: [
    'eslint:recommended', // ESLint 官方推荐规则
    'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
    'plugin:vue/vue3-recommended', // 使用 Vue3 推荐规则（比 essential 更严格）
    'plugin:prettier/recommended' // 将 Prettier 规则作为 ESLint 规则来用，避免冲突（需要先安装）
  ],
  // 针对特定文件的配置
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        // 在 .vue 文件中，调整某些规则的严格程度
        'vue/multi-word-component-names': 'off' // 允许单个单词的组件名，如 Home.vue
      }
    }
  ],
  // 解析器配置
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser', // 解析 TypeScript
    sourceType: 'module'
  },
  // 使用的插件
  plugins: ['@typescript-eslint', 'vue'],
  // 自定义规则：这里可以覆盖或补充继承规则集的设置
  rules: {
    // TypeScript 规则：允许使用 any，但在企业项目中建议后期收紧
    '@typescript-eslint/no-explicit-any': 'off',
    // Vue 规则：要求组件属性定义类型
    'vue/require-prop-types': 'error',
    // 关闭 console 警告，但生产构建时会有其他工具处理
    'no-console': 'off',
    'no-debugger': 'off'
  }
};

为了让这套配置发挥最大威力，我们还需要安装一系列配套的插件：

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier

最后，在 package.json 中添加 lint 脚本，方便我们检查和自动修复：

{
  "scripts": {
    "lint": "eslint src --ext .ts,.vue",
    "lint:fix": "eslint src --ext .ts,.vue --fix"
  }
}

现在，运行 pnpm run lint 可以检查代码问题，运行 pnpm run lint:fix 可以自动修复大部分格式和简单语法问题。

2.2 配置Prettier：你的代码自动格式化机器人

Prettier 和 ESLint 有部分功能重叠，我们需要让它们和谐共处。Prettier 只关心格式（换行、缩进、引号