黑马程序员技术交流社区

标题: 【成都校区】- 快速上手最新的 Vue CLI 3 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-5-16 15:04
标题: 【成都校区】- 快速上手最新的 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 版本：
  
  

1npm uninstall -g vue-cli

然后安装新的：

1npm install -g @vue/cli
图形界面

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

开始一个新项目

介绍使用图形启动新的 Vue 项目：

• 使用用户图形界面
  
  

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

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

1vue ui

它会自动打开浏览器并访问 http://localhost:8000/project/select 上的 GUI 工具。

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

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

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

安装插件

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

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

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

安装依赖项

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

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

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

运行任务

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

项目 dashboard 侧栏上的最后一个图标用于任务。

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

配置

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

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

即时原型制作

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

1npm install -g @vue/cli-service-global

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

创建单个Vue组件

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

1// helloword.vue file
2<template>
3  <div class=”hello”>
4    <h1>{{ msg }}</h1>
5    <h3>Installed CLI Plugins</h3>
6    <h3>Essential Links</h3>
7    <h3>Ecosystem</h3>
8  </div>
9</template>
10<script>
11  export default {
12    name: 'HelloWorld',
13    props: {
14        msg: String
15    }
16  }
17</script>

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

1vue serve helloWorld.vue

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

结论

我们已经一步步的完成了使用新的 Vue CLI 3.0 以及附带的 GUI 工具的过程。在撰写本文时，GUI 工具还无法通过 GUI 工具的即时原型设计在单个组件上创建或运行任务，但可以在 CLI 上完成。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2