快速上手最新的 Vue CLI 3
翻译：疯狂的技术宅
原文： https://blog.logrocket.com/ge...
本文首发微信公众号：前端先锋
欢迎关注，天天都给你推送新鲜的前端技术文章html
概要：本文将指导你快速上手 Vue CLI 3，包括最新的用户图形界面和即时原型制做功能的使用步骤。
介绍
尤雨溪（ Evan You）发起并建立的 Vue JS ，是一个用于构建用户界面的很是先进的框架，在 GitHub 上拥有超过 121,000 star，代码贡献者也超过了 234 位 。它包含一个可以使开发人员专一于 Web 应用视图层的核心库，以及一个支持库的生态系统，可帮助你解决大型单页应用的复杂性问题。前端
几个月前Vue团队发布了 Vue CLI 3 。本文将指导你使用Vue CLI 3，包括新的图形界面和即时原型设计功能。vue
开始以前的准备
本文适用于使用 Vue JS 的中级前端开发人员，熟悉基本概念和安装过程。在开始使用 Vue CLI 3 以前，你应该具有如下条件。node
你须要：git
- 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 界面，适用于喜欢图形界面而不是命令行的人。你能够用这个工具建立项目、安装插件和依赖项，还能够用它运行服务或构建用于生产环境的程序。github
本文分别介绍了使用 CLI 和 GUI 工具建立 Vue 项目，它还解决了目前只能用 CLI 工具进行的即时原型设计等其余工做。面试
开始一个新项目
有两种方法能够启动新的 Vue 项目：vue-cli
- 使用用户图形界面
- 使用命令行
图形界面
用户图形界面技术使你经过 GUI 工具点击几回鼠标就能够建立一个新项目。npm
打开机器上的终端并运行如下GUI命令：
vue 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 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 侧栏上的最后一个图标用于任务。你能够看到界面中显示的如下任务：
- Serve：这会在 localhost 上的本地开发服务器中运行你的程序。它有一个很是直观的 dashboard，显示错误日志和消息、资源，模块和使用的依赖项。它有一个数据可视化分析器，只需单击 stop task 便可轻松终止任务
- Build：界面看起来与 Serve 很是类似，但它在 dist 文件夹中缩小并构建生产环境下的程序
- Lint：用你在建立应用程序时选择的 eslint 标准处理 linting
- 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 上完成。我但愿本指南可以对你有全部帮助，编码愉快！
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章
