如何设置 Vue 开发环境

如果你打算用 Vue 做大量的工作，从长远来看，花一些时间来设置你的编码环境会带来好处。一个强大的编辑器和一些精心挑选的工具将使您更有效率，最终成为一个更快乐的开发人员。

在这篇文章中，我将演示如何配置 VS Code 以使用 Vue。我将展示如何使用 ESLint 和 Prettier 对代码进行 lint 和格式化，以及如何使用 Vue 的浏览器工具来了解 Vue 应用程序的底层情况。完成阅读后，您将建立一个工作开发环境，并准备好像老板一样开始编写 Vue 应用程序。

让我们开始吧！

想从头开始学习 Vue.js？本文摘自我们的高级库。使用 SitePoint Premium 获取一整套 Vue 书籍，涵盖基础知识、项目、技巧和工具等

安装和设置您的编辑器

我说我将在本教程中使用​​VS Code​​​，我实际上将使用​​VSCodium​​，它是 VS Code 的开源分支，没有 Microsoft 品牌、遥测和许可。该项目正在积极开发中

您使用哪个编辑器来跟随并不重要。两者都可用于 Linux、Mac 和 Windows。您可以​​在此处下载最新版本的 VSCodium​​，或在此处​​下载最新版本的 VSCode​​并以适合您操作系统的正确方式安装它。

在本指南的其余部分，为了保持一致性，我将编辑器称为 VS Code。

添加 Vetur 扩展

启动编辑器时，您会注意到窗口左侧工具栏中的一组五个图标。如果单击这些图标的底部（方形），将打开一个搜索栏，您可以在其中搜索​​VS Code Marketplace​​。在搜索栏中输入“vue”，你应该会看到列出了几十个扩展，每个都声称做的事情略有不同。

根据您的用例，您可能会在这里找到适合您的东西。有很多可用的。例如，如果您正在处理一个涉及 TypeScript 的 Vue 项目，​​则适用于 Vue 的 TSLint可能会很方便。​​现在，我将专注于一个名为​​Vetur​​的产品。

在搜索框中输入“Vetur”并选择由 Pine Wu 编写的包。然后点击安装。

安装扩展程序后，点击重新加载以激活，您就可以开始营业了。

探索 Vetur 的功能

如果您访问​​该项目的主页​​，您会看到该扩展为您提供了许多功能：

• 语法高亮
• 片段
• 埃米特
• 掉毛/错误检查
• 格式化
• 自动完成
• 调试

现在让我们看看其中一些在行动。

注意：其中许多功能仅在您设置了项目时才有效。这意味着您需要创建一个文件夹来包含您的 Vue 文件，使用 VS Code 打开该文件夹并通过 VS Code 的资源管理器访问这些文件。

语法高亮

随着您的应用程序的增长，您无疑会希望利用​​单文件组件​​(SFC) 来组织您的代码。它们有一个​​.vue​​结尾，包含一个模板部分、一个脚本部分和一个样式部分。如果没有 Vetur，这就是 VS Code 中的 SFC：

但是，安装 Vetur 会使它看起来像这样：

片段

正如您在​​VS Code 网站​​上看到的那样，片段是模板，可以更轻松地输入重复的代码模式，例如循环或条件语句。Vetur 使您可以在单文件组件中使用这些片段。

它还带有一些自己的片段。例如，尝试在语言区域以外的区域输入“scaffold”（不带引号），它将生成使用 SFC 所需的所有代码：

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

埃米特

​​Emmet​​将片段的概念提升到了一个全新的水平。如果您从未听说过这个并且在文本编辑器上花费了任何时间，我建议您前往 Emmet 网站并花一些时间熟悉它。它有可能大大提高您的生产力。

简而言之，Emmet 允许您将各种缩写扩展为 HTML 或 CSS 块。Vetur 默认启用此功能。

尝试单击一个​​<template>​​区域并输入以下内容：

div#header>h1.logo>a{site Name}

然后按Tab。它应该扩展为：

<div id="header">
  <h1 class="logo"><a href="">sitename</a></h1>
</div>

错误检查/Linting

Vetur 开箱即用，提供了一些基本的错误检查。这可以方便地发现代码中的拼写错误。

在上面的例子中，Vetur 注意到我忘记了对象属性名称后面的冒号，因此用红色下划线。打开错误面板（单击左下角的小十字）会为您提供错误描述。

Vetur 还使用​​eslint-plugin-vue​​来 lint 模板。我们将在下一节中详细了解为什么 linting 代码是一个好主意，但现在，让我们看看它的实际效果。

让我们为我们的属性添加一个​​items​​键：​​data​​

export default {
  data () {
    return {
      message: "Vetur is awesome!",
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  }
}

然后添加一些代码在我们的模板中输出：

<template>
  <div>
    <h1>Hello, World!</h1>
    <p>{{ message }}</p>

    <ul>
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>
  </div>
</template>

我们马上就会看到​​<li v-for="item in items">​​红色下划线。是什么赋予了？

好吧，您可以将鼠标悬停在有问题的代码上，或者打开错误控制台以查看困扰 Vetur 的问题。

错误似乎是我们​​忘记声明 key​​。让我们补救一下：

<li v-for="(item, i) in items" :key="i">
  {{ item.message }}
</li>

并且错误从我们的编辑器中消失了。

智能感知

​​IntelliSense​​是 VS Code 中我最喜欢的功能之一，但它仅限于编辑器可以理解的几种格式。安装 Vetur 使 IntelliSense 在您的​​.vue​​文件中可用，这非常方便。

您可以通过单击​​<template>​​Vue 组件的区域并在任何标签（减去引号）上键入“v-”来尝试此操作。你应该看到这个：

这允许您从任何列出的指令中进行选择，并为您提供每个指令的说明。

这不是 Vetur 能做的全部，但我们将把扩展留在那里，并将注意力转向使用 Vue 的 CLI 设置项目。

带有 Vue CLI 的示例项目

在构建新的 Vue 应用程序时，快速启动和运行的最佳方法是使用​​Vue CLI​​。这是一个命令行实用程序，允许您从一系列构建工具中进行选择，然后它将为您安装和配置。它还将为您的项目搭建脚手架，为您提供可以构建的预配置起点，而不是从头开始。

注意：如果 CLI 对您来说是新的，您可能想查看我们的教程“ ​​Vue CLI 初学者指南​​”在这个 Vue 系列中。

要开始使用，您需要在系统上安装 Node。您可以通过从​​官方网站​​下载系统的二进制文件或使用​​版本管理器​​来完成此操作。我推荐两种方法中的第二种。

安装 Node 后，执行以下命令：

npm install -g @vue/cli

并使用以下命令创建一个新的 Vue 项目：

vue create my-project

这将打开一个向导，要求您选择一个预设。选择手动选择功能，然后接受所有内容的默认值，除了当您被要求选择 linter/formatter 配置时。在这一步中，一定要选择ESLint + Prettier和Lint on save，并将配置文件放在​​package.json​​.

用 ESLint 整理你的代码

如果您打开这个新创建的项目并查看该​​package.json​​文件，您会注意到 CLI 已经为您设置了​​ESLint​​。这是一个可以自动检查您的代码是否存在潜在问题的工具。这提供了许多好处，例如：

• 保持代码风格一致
• 发现潜在的错误和不良模式
• 遵循​​风格指南时执行质量​​
• 由于上述所有原因节省时间

注意：如果您想深入了解 ESLint，请查看我们的文章“​​使用 ESLint 启动并运行——可插入的 JavaScript Linter​​ ”。

如果查看 中的​​devDependencies​​属性​​package.json​​，您会发现 CLI 也在使用​​eslint-plugin-vue​​。这是 Vue.js 的官方 ESLint 插件，它能够检测​​.vue​​文件中的代码问题。

让我们来测试一下。

启动 Vue 开发服务器​​npm run serve​​并导航到​​localhost:8080​​。

在 VS Code 中，使用 CLI（文件>打开文件夹）打开您刚刚创建的项目，然后导航到​​src/components/HelloWorld.vue​​VS Code 资源管理器中。让我们为我们的 Vue 实例添加一个方法：

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    sayHi() {
      console.log("hi");
    }
  }
}

现在，如果您查看运行开发服务器的终端窗口，您会看到 Vue 抱怨。

这是因为，在后台，Vue CLI 已将 ESLint 配置为使用​​eslint:recommended​​规则集。​​这将启用在ESLint 规则页面​​上标记有复选标记的任何规则，其中​​no-console​​是其中之一。

虽然 CLI 在终端中向我们显示 ESLint 错误很好，但如果我们也能在编辑器中看到它们不是更好吗？好吧，幸运的是我们可以。跳回 VS 代码，单击扩展图标并输入“ESLint”（不带引号）。最好的结果应该是​​Dirk Baeumer​​​​名为ESLint​​的包。安装它并重新启动 VS Code。

最后，您需要编辑 VS Code 首选项。转到文件>首选项>设置并编辑用户设置文件并添加以下配置：

"eslint.validate": [
  "vue"
]

这将告诉我们刚刚安装的 ESLint 插件对​​.vue​​文件执行验证。

​​rules: {}​​如果您愿意，您可以在以下部分关闭此（或任何）规则​​package.json​​：

"eslintConfig": {
  ...
  "rules": {
    "no-console": 0
  },
  ...
}

用 Prettier 格式化你的代码

Prettier 是一个固执己见的代码格式化程序。正如您​​在项目主页​​上所读到的，它通过解析您的代码并使用自己的规则重新打印它来强制执行一致的样式，这些规则考虑了最大行长，并在必要时包装代码。

起初这听起来可能有点苛刻，但一旦你习惯了它，你就不必再考虑代码格式了。如果您是团队的一员，这将非常有用，因为 Prettier 将停止所有正在进行的关于风格的争论。

注意：如果你不相信，你可以​​在这里阅读更多关于为什么你应该使用 Prettier 的信息​​。

Prettier 与 Vue CLI 结合使用的方式类似于 ESLint。​​console.log("hi");​​要查看它的实际效果，让我们从前面的示例中删除语句末尾的分号。这应该在终端中显示警告：

warning: Insert `;` (prettier/prettier) at src/components/HelloWorld.vue:41:24:
  39 |   methods: {
  40 |     sayHi() {
> 41 |       console.log("hi")
     |                        ^
  42 |     }
  43 |   }
  44 | };

1 error and 1 warning found.
1 warning potentially fixable with the `--fix` option.

由于我们之前安装的 ESLint 插件，它还会在 VS Code 中显示警告。

每当我们保存文件时，我们也可以让 Prettier 为我们修复任何格式错误。为此，请转到文件>首选项>设置并编辑用户设置文件以添加以下配置：

"editor.formatOnSave": true

现在，当您按下保存时，所有内容都将根据​​Prettier 的标准规则集​​进行格式化。

​​"prettier"​​请注意，您可以通过文件中的键在Prettier 中配置一些规则​​package.json​​：

"prettier": {
  "semi": false
}

例如，以上将关闭分号规则。

​​您可以在此处​​阅读有关配置选项的更多信息。

Vue 浏览器工具

在本节中，我想看看 Vue.js 开发工具，它可以作为​​Chrome​​和​​Firefox​​的浏览器插件使用，也可以作为​​跨平台的 Electron 应用程序​​使用，它还可以调试在移动设备上运行的 Vue 应用程序.

安装它们后，您可以通过访问正在运行的 Vue 应用程序、打开浏览器的控制台并点击Vue按钮来访问它们。然后，您将看到另外三个部分：组件、Vuex和事件。

第一部分为您提供构成应用程序的所有组件的分层视图。​​props​​从树中选择一个组件允许您在右侧窗格中检查其状态（例如，它接收到的）。它的一些值（例如它的​​data​​对象）可以在应用程序运行时动态编辑。

只有在应用程序中检测到 Vuex 商店时，Vuex选项卡才处于活动状态。（有关这方面的更多信息，请查看本 Vue 系列中的“Vuex 入门：初学者指南”。）它允许您检查存储在任何时间点的状态，以及所有已提交的变更。您甚至可以在突变中来回移动，有效地穿越应用程序的状态。

Events选项卡聚合了应用程序从组件树中的任何位置发出的所有事件。选择一个事件将在右侧窗格中显示有关它的更多信息，允许您查看哪个组件发出它以及发送的任何有效负载。

Vue 的浏览器工具比我在这里演示的要多得多，因此我鼓励您安装它们并随着应用程序的增长进行试验。

结论

这是一个包装。在本指南中，我演示了如何为 VS Code 安装 Vetur 插件，并重点介绍了它的一些功能。我还展示了如何使用 Vue CLI 生成项目，以及如何使用 ESLint 和 Prettier 来确保代码质量和一致性。我们还简要了解了 Vue 的浏览器工具，并了解了如何检查正在运行的 Vue 应用程序的状态，这对于调试目的很重要。

这应该会让你在拥有一个编写 Vue 应用程序的合理环境的道路上走得很好，并希望让你成为一个高效且快乐的开发人员。