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

介绍

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

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

img

开始之前的准备

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

你需要:

npm uninstall -g vue-cli

然后安装新的:

npm install -g @vue/cli

图形界面

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

img

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

开始一个新项目

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

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

图形界面

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

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

vue ui

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

img

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

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

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

img

命令行

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

vue create vue-test

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

安装插件

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

图形界面

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

img

添加新插件很简单,单击 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 依赖关系等等。

img

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

命令行

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

npm install bootstrap

运行任务

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

图形界面

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

img

  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 上完成。我希望本指南能够对你有所有帮助,编码愉快!