返回

Vue3 + Vite + TypeScript + ESLint：轻松构建Vue3项目

前端

在充满活力的现代网络开发环境中，Vue.js 始终扮演着举足轻重的角色。随着 Vue3 的推出，及其与 Vite、TypeScript、ESLint 等工具的完美结合，开发人员在构建 Vue 项目时，可以获得更加轻松高效的体验。本文将以这些令人兴奋的技术为基础，一步步引导您创建Vue3项目。同时，您还将了解如何引用Vue-router，配置 TypeScript、ESLint 和 Prettier，并一一规避构建过程中可能遇到的常见陷阱。准备好了吗？让我们开始吧！

搭建Vue3项目的序幕：Vue-CLI的谢幕

Vue-CLI作为Vue项目的搭建工具，曾经风靡一时。但随着Vite的横空出世，其地位受到强烈挑战。Vite是一款更为轻量、快速的构建工具，不仅可以大幅缩短项目构建时间，而且与Vue3完美兼容。因此，在本文中，我们将采用Vite来创建Vue3项目。

一键开启新项目之旅：npx脚手架

创建Vue3项目的旅程，从使用npx脚手架开始。打开终端，输入以下命令：

npx create-vue-app <project-name> --use-vite

其中，<project-name>为您希望创建的项目名称。耐心等待脚手架的搭建过程，完成后，您将进入项目目录，开启属于您的Vue3项目之旅。

巧妙利用TypeScript，拓展Vue项目新境界

TypeScript作为JavaScript的超集，以其强大的类型检查功能，为项目开发提供了可靠的保障。在Vue3项目中，TypeScript同样可以发挥重要作用。首先，在根目录的package.json文件中，添加如下代码：

{
  "scripts": {
    "serve": "vue-tsc --watch --noClear --preserveWatchOutput --port 8080",
    "build": "vue-tsc --noClear --skipLibCheck --target lib --outDir dist"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0",
    "typescript": "^4.0.0",
    "vue-tsc": "^0.24.2"
  }
}

然后，在项目目录中新建.vuepressrc文件，并添加以下内容：

module.exports = {
  "typescript": true
}

至此，您已将TypeScript集成到Vue3项目中。现在，您可以使用TypeScript编写代码，并享受类型检查带来的便利。

ESLint的驾到：为代码质量保驾护航

ESLint是一款代码质量检查工具，能够帮助您发现代码中的潜在问题。在Vue3项目中，您可以通过安装ESLint并配置.eslintrc.js文件，来实现代码质量的有效把控。

首先，在项目根目录，运行以下命令安装ESLint：

npm install --save-dev eslint

然后，在项目根目录下新建.eslintrc.js文件，并添加以下内容：

module.exports = {
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "@vue/typescript"
  ],
  "rules": {
    "no-console": "off"
  }
};

现在，您可以通过运行以下命令，让ESLint检查您的代码：

npm run lint

ESLint会自动检测代码中的问题，并输出报告。您可以根据报告中的提示，对代码进行修改，从而提高代码质量。

Prettier的魅力：代码格式化新境界

Prettier是一款代码格式化工具，能够让您的代码始终保持整洁、一致的风格。在Vue3项目中，您可以通过安装Prettier并配置.prettierrc.js文件，来让代码格式化变得轻而易举。

首先，在项目根目录，运行以下命令安装Prettier：

npm install --save-dev prettier

然后，在项目根目录下新建.prettierrc.js文件，并添加以下内容：

module.exports = {
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100
};

现在，您可以通过运行以下命令，让Prettier格式化您的代码：

npm run format

Prettier会自动将您的代码格式化成符合.prettierrc.js文件配置的风格。

勇往直前，拥抱Vue3项目新篇章

至此，您已经成功创建了Vue3项目，并集成了TypeScript、ESLint、Prettier等工具。现在，您可以尽情挥洒创意，构建出独一无二的Vue3应用。在开发过程中，如果您遇到任何困难或问题，请不要犹豫，随时查阅官方文档或寻求社区的帮助。Vue3的广阔天地，正等待着您去探索和征服！