快速上手最新的 Vue CLI 3

翻译：疯狂的技术宅

原文：blog.logrocket.com/getting-sta…

概要：本文将指导你快速上手 Vue CLI 3，包括最新的用户图形界面和即时原型制作功能的使用步骤。

介绍

尤雨溪（ Evan You）发起并创建的 Vue JS ，是一个用于构建用户界面的非常先进的框架，在 GitHub 上拥有超过 121,000 star，代码贡献者也超过了 234 位。它包含一个能够使开发人员专注于 Web 应用视图层的核心库，以及一个支持库的生态系统，可帮助你解决大型单页应用的复杂性问题。

几个月前Vue团队发布了 Vue CLI 3。本文将指导你使用Vue CLI 3，包括新的图形界面和即时原型设计功能。

开始之前的准备

本文适用于使用 Vue JS 的中级前端开发人员，熟悉基本概念和安装过程。在开始使用 Vue CLI 3 之前，你应该具备以下条件。

你需要：

• Node.js 10.x 及以上。你可以通过在终端或命令提示符下执行 node -v 来验证是否符合要求
• 安装了 Node Package Manager 6.7 或更高版本 (NPM)
• 代码编辑器：强烈建议使用Visual Studio Code
• 在你的计算机上全局安装 Vue 最新版本
• 在你的计算机上安装 Vue CLI 3.0。安装之前请先卸载旧的 CLI 版本：

npm uninstall -g vue-cli
复制代码

然后安装新的：

npm install -g @vue/cli
复制代码

图形界面

Vue CLI 3 附带了一个 GUI 工具，它是终端命令的 Web 界面，适用于喜欢图形界面而不是命令行的人。你可以用这个工具创建项目、安装插件和依赖项，还可以用它运行服务或构建用于生产环境的程序。

本文分别介绍了使用 CLI 和 GUI 工具创建 Vue 项目，它还解决了目前只能用 CLI 工具进行的即时原型设计等其他工作。

开始一个新项目

有两种方法可以启动新的 Vue 项目：

• 使用用户图形界面
• 使用命令行

图形界面

用户图形界面技术使你通过 GUI 工具点击几次鼠标就可以创建一个新项目。

打开机器上的终端并运行以下GUI命令：

vue ui
复制代码

它会自动打开浏览器并访问 http://localhost:8000/project/select 上的 GUI 工具。刚打开时看起来像这样：

要创建新项目，请单击 create 按钮，然后在同一界面中查看打开的文件管理器。浏览（项目）文件时，你会注意到先前创建的 Vue 项目上有 Vue 符号（表示它们是Vue项目）。选择要在其中创建新程序的文件夹，然后单击页面上的 create new project here按钮。这将带你完成两个简单的注册阶段。

1. **Details：**你可以在此处选择项目的名称，选择 yarn 或 npm 包管理器。你还可以通过切换选项来覆盖文件夹的内容（如果已存在）。最后你可以决定是否要为项目创建一个 git 存储库，它还附带一个选项来供你选择初始的提交信息。
2. Presets： Presets 是插件和配置的关联。选择功能后，你可以选择将其保存为预设，以便在以后的项目使用，而无需再次重新进行配置。有三类预设：默认预设仅包含 babel 和 eslint 插件以及 Vue 基本配置；自定义预设允许你选择自己的插件；远程预设允许你从远程 git 存储库中选择预设（是的，这是可以的）

几秒钟后，你将获得新项目创建通知，并在你的程序界面中打开项目的 dashboard。

命令行

在 CLI 命令的使用新语法中，要创建新项目，你只需在终端上运行此命令：

vue create vue-test
复制代码

其中 Vue-test 是你要构建的程序的名称。此命令会导致一系列提示，这些提示将要求与 GUI 完全相同，不同的是它们会在终端中进行提示。当你回答所有提示并按照自己希望的方式配置应用程序时，CLI 会为你构建它。

安装插件

新的 CLI 构建过程是基于插件的。 Vue 中的功能甚至第三方功能都可以被标识为插件，新 CLI 使用插件来修改我们在任何时间点设置的项目的配置。它们基本上是依赖编辑 Webpack 配置的额外功能。

图形界面

项目的 dashboard 侧栏有五个图标，第二个图标用于插件。当你单击它时，你将看到在本文开头注册阶段安装的插件：eslint、babel 和 cli-service，它是安装插件时依赖的服务。

添加新插件很简单，单击 add plugin 按钮并显示插件列表，你可以用搜索栏进行搜索。如果你选择了一个像 Vuetify 这样的插件，将会看到一个 install 按钮，它会将插件安装到你的项目中，并自动对插件进行 Webpack 配置更改。

命令行

要直接使用 CLI 安装 Vuetify 插件，请切换到项目目录并使用 add 命令，如下所示：

vue add Vuetify
复制代码

这会将 Vuetify 插件安装到你的 Vue 项目中，并修改插件将影响的所有文件。某些插件附带了导致其安装的后续提示。在我看来，我认为在新 CLI 中实现的插件概念受到了 Angular CLI 的启发。

安装依赖项

Vue 中的依赖关系由主 Vue 核心依赖关系和开发依赖关系构成。这些也可以通过 GUI 和 CLI 安装。

图形界面

项目 dashboard 侧边栏的第三个图标用于依赖项。主要部分有 Vue 和核心依赖关系，dev 依赖关系包括模板编译器、eslint dev 依赖关系等等。

如果要在项目中安装 Bootstrap 依赖，那么单击 install dependency 按钮，然后搜索 bootstrap 并单击 install。几秒钟后会通知你安装完毕。

命令行

要直接用 CLI 来安装 Bootstrap 依赖，请切换到项目目录并使用 install 命令，如下所示：

npm install bootstrap
复制代码

运行任务

任务就像对我们的 Vue 项目执行自动命令，可以是在开发服务器上提供的服务，也可以用于构建生产环境下的程序或执行 linting。所有这些任务都可以通过 GUI 和 CLI 工具完成。

图形界面

项目 dashboard 侧栏上的最后一个图标用于任务。你可以看到界面中显示的以下任务：

1. **Serve：**这会在 localhost 上的本地开发服务器中运行你的程序。它有一个非常直观的 dashboard，显示错误日志和消息、资源，模块和使用的依赖项。它有一个数据可视化分析器，只需单击 stop task 即可轻松终止任务
2. **Build：**界面看起来与 Serve 非常相似，但它在 dist 文件夹中缩小并构建生产环境下的程序
3. **Lint：**用你在创建应用程序时选择的 eslint 标准处理 linting
4. **Inspect：**在你创建项目时隐式检查为应用程序设置的 Webpack 配置

命令行

要直接通过 CLI 运行这些任务，请使用以下语法：

• Serve

npm run serve
复制代码

• Build

npm run build
复制代码

• Lint

npm run lint
复制代码

配置

你可以在配置选项卡中更改 Vue 项目的原始配置，这是项目 dashboard 侧栏上的第四个图标。

你可以更改目录位置和 dist 文件夹的位置以进行生产环境的发布。还可以将 CSS 设置更改为预处理器。

即时原型制作

你是否想创建单个 Vue 组件而不去创建整个项目呢？现在可以用名为 instant prototyping 的新 Vue CLI 功能来实现了，它抽象了在已保存的 .vue 文件上创建单个组件所需的所有配置。你所要做的就是在自己的机器上全局安装 Vue CLI 服务，可以这样做：

npm install -g @vue/cli-service-global
复制代码

在安装了该服务后，你就可以在计算机上的任何位置创建单个 Vue 组件，其功能与完整的 Vue 项目相同。

创建单个Vue组件

打开你选择的文件夹并创建一个新文件，将其命名为 helloworld.vue，将下面的代码复制到文件中并保存：

// helloword.vue file
<template>
  <div class=”hello”>
    <h1>{{ msg }}</h1>
    <h3>Installed CLI Plugins</h3>
    <h3>Essential Links</h3>
    <h3>Ecosystem</h3>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    props: {
    	msg: String
    }
  }
</script>
复制代码

可以用以下命令在 dev 服务器上运行它：

vue serve helloWorld.vue
复制代码

这会在本地主机上跑起一个 Vue 单个组件，就像完整项目一样。

结论

我们已经一步步的完成了使用新的 Vue CLI 3.0 以及附带的 GUI 工具的过程。在撰写本文时，GUI 工具还无法通过 GUI 工具的即时原型设计在单个组件上创建或运行任务，但可以在 CLI 上完成。我希望本指南能够对你有所有帮助，编码愉快！

欢迎关注公众号：前端先锋，获取更多前端干货。

转载于:https://juejin.im/post/5cc572ef5188252da9453f90