Vue CLI 入门

  • 2 分钟

Vue CLI 提供了一套开发工具，包括用于项目基架构建和快速原型设计的工具和一个开发服务器。 它帮助你快速创建初始应用程序，以便你可以专注于编码，而不是配置库和其他设置。

启动

Vue CLI 的核心用法是启动应用程序。 Create 脚本供一个向导，你可以在其中选择一些最常见的配置，包括：

  • Lint 分析选项：确保所有代码看上去一致。 这些选项还可帮助发现错误。
  • 应用程序类型：选择是否添加渐进式 Web 应用支持。
  • Babel 支持： Babel 的任务是当需要在较旧版本的浏览器中使用应用时，将较新的 JavaScript 语法转换为旧式 JavaScript 语法。
  • 语言：选择 JavaScript 或 TypeScript。 哪一个都可以，但 TypeScript 除其他功能外还提供类型，在应用程序增长时可能是一个不错的选择。 Vue 本身就是使用 TypeScript 生成的。

生成过程

Vue CLI 的设计使其能处理单文件 Vue 组件或 .vue 文件。 模块捆绑程序或捆绑程序管理将 .vue 文件中的专用语法转换为相应 JavaScript、HTML 和 CSS 语法的过程，使浏览器可读取这些文件。

Vue CLI 将 webpack 作为默认捆绑程序。 在大多数情况中，webpack 的默认配置都适用。 使用 Vue CLI 可跳过配置捆绑程序需要的步骤，改用提供的设置。

开发服务器

开发任何类型的应用程序都需要反复试验。 你需要做一些更改，在浏览器中加载页面，测试该页面，然后再进行更改。 然后重复此过程，直到一切都按照预期工作。

你希望尽量减少此过程涉及的步骤。 为了简化开发，Vue CLI 包含了一个开发服务器。 该开发服务器会在你每次保存文件时检测文件更改，重新生成（或重新捆绑）项目，并使你能在浏览器中测试页面。