使用 Create-Vue 和 Vite 创建现代 Vue 应用程序

create-vue 是 Vue 应用程序的脚手架工具。它取代了 Vue CLI 作为创建 Vue SPA（单页应用程序）的推荐方式。今天我们将检查 create-vue，看看它是如何工作的，并使用它构建一个应用程序。

create-vue 使用Vite自动创建新的 Vue 2 或 Vue 3 应用程序。Vite 是 Vue 团队打造的一款极速构建工具。Vue CLI 有自己的基于 webpack 的构建管道，而 create-vue 只是搭建一个应用程序。这种方法提供了更大的灵活性，因为您可以使用任何适用于 Vite 的插件和配置，但使用起来仍然非常简单。此外，由于 Vite 的优化，create-vue 比 Vue CLI 快很多。事不宜迟，让我们开始吧。

使用 Create-Vue 创建应用

首先，确保您安装了 node.js 和 npm。您可以通过运行来检查npm -v：

npm -v
8.19.1

如果您没有 Node.js，您可以通过转到Node.js 下载页面来安装它。完成此操作后，在您希望项目所在的文件夹中打开一个终端。然后，运行npm init vue@3. 它会要求您安装 create-vue。然后你必须配置一些东西，我将指导你完成。

首先，您需要确定项目的名称。我将名称设置为create-vue-example，但您可以将其设置为任何您想要的名称。

接下来，create-vue 会询问你是否要使用 typescript。这只是一个基本示例，因此让我们将其设置为否。

接下来它会询问你是否要添加 jsx。再一次，因为这是一个基本的例子，我们就说不。

其余的选择 Vue Router、ESLint 和 Prettier 的 yes，其余的选择 no。最后，您的终端应如下所示：

现在，正如说明所说，cd进入项目目录，安装其依赖项npm install并运行npm run dev. 它应该给你一个本地服务器的链接。单击链接，您应该会看到如下内容：

恭喜！您刚刚使用 create-vue 创建了您的第一个 Vue 应用程序！如果您想构建它以进行部署，您可以npm run build立即运行，让我们深入研究代码。

探索代码

完成所有设置后，文件结构应如下所示：

接下来，让我们看一下src文件夹：

现在我们已经查看了文件，让我们尝试使用插件自定义构建管道。

使用插件自定义构建管道

插件对于提高开发效率非常有帮助。例如，假设您想实现来自Google fonts的自定义字体。您可以使用 Google 字体在您的网站上为您提供的链接来自动下载字体。但是，谷歌字体可能会很慢。幸运的是，有解决方案。您可以使用Google Webfonts Helper之类的工具自行托管字体，但这可能需要付出很多努力。幸运的是，插件在这里提供了帮助。使用vite-plugin-webfont-dl，您可以像往常一样链接到 Google Fonts 上的字体，并且插件会处理所有转换。

如何添加插件

添加插件非常简单。首先，我们需要通过运行npm install --save-dev plugin-name或在这种情况下安装它，npm install --save-dev vite-plugin-web-dl. 接下来，我们需要将它添加到 Vite 配置中。首先，去vite.config.js并像这样导入插件：

import webfontDownload from 'vite-plugin-webfont-dl';

接下来，您需要将插件放入plugins配置数组中。

plugins: [vue(), webfontDownload()],

现在，您的vite.config.js应该如下所示：

import { fileURLToPath, URL } from 'node:url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import webfontDownload from 'vite-plugin-webfont-dl';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), webfontDownload()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

现在您可以通过简单地粘贴 Google Fonts 提供给您的 HTML 来加载字体，它们会自动进行优化！

使用环境变量

如果您想在构建过程中轻松地从代码访问配置，您可能需要使用环境变量。Vite 允许您从文件中加载变量，并在构建过程中用变量的值替换对变量的调用。例如，假设您想轻松配置代码使用的数据库 URL。您将首先在项目目录中创建一个.env文件。在该文件中，输入如下内容：

VITE_DB_URL=https://url

变量名无关紧要，只要它以 . 开头即可VITE_。现在，为了访问您的代码，您需要像这样引用它：

console.log(import.meta.env.VITE_DB_URL)

然后，当 Vite 编译您的项目时，该代码将被转换为如下内容：

console.log("https://url")

Vite 还包括一些内置的环境变量，例如import.meta.env.PROD.

if (import.meta.env.PROD) {
    // App is being compiled for deployment
} else {
    // App is in development mode

结论

现在您知道了 create-vue 和 Vite 的方法！这些工具让我们可以轻松搭建一个开发速度快、配置强大的 Vue 应用。如果您想了解更多信息，请查看Vite 文档，如果您想查看其他选项，请查看Vitepress和Nuxt。谢谢阅读！