快速上手最新的 Vue CLI 3

梦里梦外; 2022-02-04 01:25 221阅读 0赞

> 翻译：疯狂的技术宅
> 
> 原文：[https://blog.logrocket.com/getting-started-with-the-new-vue-cli-3-43bcbe1ae759][https_blog.logrocket.com_getting-started-with-the-new-vue-cli-3-43bcbe1ae759]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]

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

## 介绍 ##

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

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

## 开始之前的准备 ##

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

你需要：

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

npm uninstall -g vue-cli

然后安装新的：

npm install -g @vue/cli

## 图形界面 ##

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

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

## 开始一个新项目 ##

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

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

### 图形界面 ###

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

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

vue ui

它会自动打开浏览器并访问 [http://localhost:8000/project/select][http_localhost_8000_project_select] 上的 GUI 工具。刚打开时看起来像这样：  
![在这里插入图片描述][20190506163706261.png]

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]

### 命令行 ###

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

vue create vue-test

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

## 安装插件 ##

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

### 图形界面 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 4]  
如果要在项目中安装 Bootstrap 依赖，那么单击 *install dependency* 按钮，然后搜索 bootstrap 并单击 *install*。几秒钟后会通知你安装完毕。

### 命令行 ###

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

npm install bootstrap

## 运行任务 ##

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

### 图形界面 ###

项目 dashboard 侧栏上的最后一个图标用于任务。你可以看到界面中显示的以下任务：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 5]

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

--------------------

欢迎关注微信公众号：前端先锋，每天第一时间阅读最新技术文章。

![SouthEast][]

[https_blog.logrocket.com_getting-started-with-the-new-vue-cli-3-43bcbe1ae759]: https://blog.logrocket.com/getting-started-with-the-new-vue-cli-3-43bcbe1ae759
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]: /images/20220204/ab12e747858046a18a0ec64666513626.png
[Evan You]: https://twitter.com/youyuxi?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor
[GitHub _ 121_000 star_ 234 _]: https://github.com/vuejs/vue
[Vue CLI 3]: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb?source=collection_home---6------3---------------------
[Node.js 10.x]: https://nodejs.org/
[Vue]: https://vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 1]: /images/20220204/bd0a314dec2649e3a0d51e4ce4f5155f.png
[http_localhost_8000_project_select]: http://localhost:8000/project/select
[20190506163706261.png]: /images/20220204/56788caf033c46c581e9f8975fc0b504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]: /images/20220204/8b6628ad92e344d68e26ca8514ed8d61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]: /images/20220204/c6647bb4b7b0402ca759534881a3c129.png
[Vuetify]: https://vuetifyjs.com/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 4]: /images/20220204/df874d60f7a0437e87a4530da5ee9b37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 5]: /images/20220204/9c25ef34bafd4ee0b34dee384faf9e8e.png
[SouthEast]: /images/20220204/8ad0c531372f47c3a6e858574495b367.png