使用vue-cil3

最新推荐文章于 2024-03-22 17:08:51 发布

- LYN ..

最新推荐文章于 2024-03-22 17:08:51 发布

阅读量1k

点赞数 1

文章标签： vue cil

本文链接：https://blog.csdn.net/LlYyNn_king/article/details/90445391

版权

搬运英文原文
Boost Your Vue.js Workflow With Vue CLI 3
前言：没有命令行界面（CLI）工具的帮助，我们很难想象现代Web开发。它们通过减少重复和繁琐任务的数量，极大地促进和加快了开发工作流程。手动设置项目，具有所有的linting，构建，测试，预处理，优化和依赖性跟踪功能，听起来不是一个有趣的工作，是吗？
这就是为什么所有现代客户端开发框架（如Angular，React等）都提供自己版本的CLI工具，而Vue.js也不例外。但凭借其最新的第三版， Vue CLI 领先于其他版本。它现在不仅功能强大且灵活，而且还配备了完整的GUI。是的，你听到了。Vue CLI 3提供开箱即用的完整图形用户界面。（简要操作流程可看https://blog.csdn.net/weixin_40688217/article/details/88321322）
使用新的Vue CLI及其Vue UI GUI，现在可以比以往更轻松地启动新的Vue.js项目。本教程将向您展示如何使用Vue CLI以及Vue UI如何进一步加快您的工作流程。让我们开始吧！

什么是Vue CLI？

Vue CLI是一套用于快速原型设计，简单应用程序搭建和高效项目管理的工具。它由三个主要工具带组成：

CLI是全局安装的npm包，它通过vue命令提供核心功能。它允许我们轻松地（vue create或）快速构建一个新项目（vue
serve）。如果我们想要对项目进行更具体和可视化的控制，我们可以通过运行vue ui命令打开CLI的GUI版本。
CLI Service是一个开发依赖项（vue-cli-service二进制文件），本地安装在使用CLI创建的每个项目中。它允许我们开发我们的项目（vue-cli-service serve），将其打包用于生产（vue-cli-service build），以及检查内部webpack项目的配置（vue-cli-service inspect）。
CLI插件是npm包，为我们的项目提供附加功能。他们的名字以@vue/cli-plugin-（对于内置插件）或vue-cli-plugin-（对于社区插件）开头。我们可以通过vue
add命令随时在开发过程中添加它们。

Vue CLI是一个全功能的系统，用于推动我们的Vue.js开发工作流程

Vue CLI凭借其丰富的功能集，可加速并简化Vue.js项目开发。让我们看看这些功能是什么：

基于插件的架构。 Vue CLI完全围绕插件构建，使其非常灵活和可扩展。我们可以选择在项目创建过程中添加哪些内置插件。但我们不仅限于这些；我们还可以在创建项目后随时添加任意数量的插件。
Vue CLI完全可配置，可扩展和可升级。
一套官方预安装插件，集成了前端生态系统（Babel，ESLint，TypeScript，PWA，Jest，Mocha，Cypress和Nightwatch）的一流工具。
单个默认预设，我们可以在项目创建期间或之后修改我们的需求。
无需弹出。与React和Angular CLI工具相比，我们可以在创建后随时安全地检查和调整项目的webpack配置，而无需弹出应用程序并切换到手动配置。
多页面支持。
无需任何配置即可进行即时原型设计。
不同的构建目标允许我们生成不同版本的项目 - 我们可以使用同一个代码库并将其构建为app，库或Web组件。
**现代模式功能。**这将为现代浏览器构建我们的应用程序，但对旧版本的应用程序具有自动回退功能很酷，对吧？
一个完整的GUI，可轻松创建，更新和管理复杂项目。
UI插件API。Vue UI公开了一个插件API，我们可以使用该API将自定义功能添加到CLI的GUI版本中。
社区中有很多有用的插件。

Vue CLI入门

在了解了Vue CLI之后，是时候在实践中看到它了。首先，我们需要安装Vue CLI 3.它需要Node.js 8.9+（推荐8.11.0+），因此我们需要确保在我们的机器上安装它。然后我们只需打开终端或命令提示符，然后运行：

1  npm install -g @vue/cli

安装完成后，我们可以开始使用该vue命令。为了检查一切是否正常，我们运行vue --version。这应该显示已安装的Vue CLI版本。现在，让我们来探索一下我们可以用Vue CLI实际做些什么。

即时原型

尽管Vue CLI主要用于处理复杂项目，但它允许我们快速，轻松地尝试我们的原始想法。可以通过安装全局Vue CLI服务插件来激活其即时原型设计功能：

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

从现在开始，我们可以随时使用该vue serve命令。我们来试试吧。我们使用以下内容创建App.vue文件：

<template>
  <h1>Hello, Vue!</h1>
</template>

然后，在同一目录中，我们运行：vue serve
这将启动Vue CLI开发服务器并将运行该应用程序 http://localhost:8080/。当我们在这个地址打开浏览器时，我们应该看到一个很好的Hello，Vue！标题。

创建一个新项目

上一节只是热身。现在让我们做一些更复杂的事情。该vue create命令使用交互式过程为新项目选择选项。让我们运行它并完成其选项。

vue create vuecli-project

使用Vue CLI创建一个新项目

在这里插入图片描述在第一个窗口中，我们被邀请选择一个预设。开箱即可只有一个预设，称为默认。我们将选择第二个选项，即手动选择项目所需的功能，然后按Enter继续。
在下一个窗口中，我们使用箭头键向上和向下导航功能列表和空格键以选择我们想要的内容。在这里，与已经选择的Babel和Linter / Formatter一起，我还选择了** Router和Vuex**。选择所需功能后，按Enter继续。
在这里插入图片描述在下一个窗口中，系统会询问是否为路由器使用历史记录模式。我是按Enter键接受默认值 Yes。
在下一个窗口中，我们需要选择我们希望如何配置Linter。我选择了ESLint + Prettier。
在下一个窗口中，我们选择何时使用Linter检查项目。我在保存时选择了 Lint，每次保存文件时都会应用。
在这里插入图片描述在下一个窗口中，我们需要决定如何配置项目。选择是要为每个功能使用单独的配置文件，还是要在package.json文件中包含所有配置设置。我更喜欢单个文件，因此我选择了 In package.json选项。
在最后一个窗口中，我们可以将整个项目创建配置保存为一个易于使用的预设，用于未来的项目。我把 xx项目。预设保存在用户文件夹内的.vuerc文件中。
完成创建过程后，将创建和配置项目，并下载并安装所需的软件包。
在这里插入图片描述

探索项目结构

在本节中，我们将探讨Vue CLI为我们创建的内容。
在这里插入图片描述

在上面显示的项目文件夹中，我们有以下文件和文件夹：

node_modules 文件夹包含应用程序和开发工具需要的软件包。
public 文件夹包含静态项目资产，其中将不包含在捆绑过程。
SRC文件夹中包含的所有资源Vue.js应用。
.gitignore 包含从Git版本控件中排除的文件和文件夹列表。
babel.config.js 包含Babel编译器的配置设置。
package.json 包含Vue.js开发所需的包列表以及用于开发工具的命令。
package-lock.json 包含项目所需的软件包及其依赖项的完整列表。
README.md 包含有关项目的一般信息。
新创建的src文件夹
现在让我们仔细看看src文件夹：

在上面显示的src文件夹中，我们有以下文件和文件夹：
assets的文件夹被用于由该应用所需的静态资源，这将包括在成束过程。
components文件夹是用于应用程序的组件。
views文件夹是用于将使用该URL的路由功能被显示组件。
App.vue 是根组件。
main.js是创建Vue实例对象的JavaScript文件。
router.js 用于配置Vue路由器。
store.js 用于配置使用Vuex创建的数据存储。

更改项目配置

默认项目配置包含合理的设置，但如果需要，我们可以通过 在项目文件夹中添加vue.config.js文件或vue在package.json文件中添加一个部分来更改它们。
我们试试第一个。我们创建一个vue.config.js文件并在其中添加以下选项：

module.exports = {
  runtimeCompiler: true
}

这将允许组件将其模板定义为字符串，而不是使用模板元素。要浏览完整的配置选项集，可以访问Vue CLI Config页面。

开发项目

正如我们上面看到的，Vue的CLI服务提供三个默认脚本：serve，build，和inspect。第一个用于开发过程。我们用npm run serve命令运行我们的项目：
在这里插入图片描述当我们在浏览器中打开我们的应用程序时，我们应该看到以下页面：
这是Home.vue页面，它使用HelloWorld.vue组件。
该 serve 命令启动基于 webpack-dev-server的开发服务器，具有可用的热模块替换（HMR）功能。这意味着当我们对组件进行更改并保存它们时，它们将立即反映出来并在浏览器中更新页面。

使用Vue CLI插件为项目添加新功能

在我们的应用程序开发的某些时候，我们可能需要为项目添加一些额外的功能，为此我们需要安装Vue CLI插件。Vue CLI插件可以修改webpack配置并注入新命令vue-cli-service。要安装插件，我们使用该vue add命令。
让我们假设我们想要为我们的项目使用Bootstrap组件。幸运的是，有一个bootstrap-vue插件，可以为我们提供它们。要安装它，我们运行：

vue add bootstrap-vue

插件安装完成后，在 ** src ** 文件夹中，我们将找到一个新的插件文件夹，其中放置了新的插件。
现在，为了测试插件的功能，让我们修改About.vue文件：

<template>
  <div class="about">
    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">
        <p>For more information visit website</p>
      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>
    </b-jumbotron>
  </div>
</template>

当我们指向浏览器中的 About页面时，我们应该看到页面已更新并使用Bootstrap进行样式设置：
在这里插入图片描述

建立生产项目

当应用程序准备好部署时，您需要创建一组仅包含应用程序代码和内容的捆绑包以及它们所依赖的模块，以便可以将这些文件部署到生产HTTP服务器。

构建应用程序

要构建我们的应用程序，我们运行： npm run build --modern

该–modern参数创建了两个版本的应用程序。其中一个针对支持最新JavaScript功能的现代浏览器，另一个是需要额外库来处理这些功能的旧浏览器的后备。很酷的是，在我们部署应用程序之后，选择使用哪个版本是完全自动化的！

注意：当我们运行 build命令时，Vue CLI允许我们指定一个 --target选项，这允许我们将代码库用于不同的用例。默认构建目标设置为构建应用程序。我们还有两个选项可供选择：将代码构建为库或Web组件。查看Build Targets页面以获取更多详细信息。

探索dist文件夹

构建过程完成后，将在项目根目录中创建dist文件夹。让我们来探索它的内容：
在这里插入图片描述该index.html的文件将是应用程序的入口点。它包含link与script将加载在所有必要的CSS和JavaScript文件的元素的CSS和JS文件夹。
所以现在我们准备将我们的应用程序部署到生产服务器。有很多选择可供选择。您可以访问“ 部署”页面了解其中的许多内容。

让我们的GUI-fy我们的项目使用Vue UI

Vue CLI 3功能非常强大，但需要付出代价。配置和记忆的选项，命令和选项太多。这使得它更复杂，更难以使用。为了让事情回归到一个轻松愉快的状态， Guillaume Chau创建了Vue UI，它大大简化了开发体验并使其更加平易近人。

首先，将CLI工具与图形界面结合起来可能听起来有点奇怪，但正如您稍后将看到的，这种非同寻常的共生非常强大和高效。

使用Vue UI重新创建我们的项目

在本节中，我们将完成之前创建的相同项目，但这次我们将使用Vue UI。

Vue UI具有自己的UI框架，在浏览器中运行它不需要Electron。只需vue ui 在任何目录中运行命令：

vue ui

在这里插入图片描述启动Vue项目管理器，并选择“ 项目”选项卡。目前还没有项目。要在此处列出一些项目，我们需要通过UI创建它们或导入使用CLI创建的项目。让我们看看我们如何创建一个新项目。

在这里插入图片描述我们切换到“ 创建”选项卡，导航到我们的应用程序所需的目录，然后单击“ 在此处创建新项目”。
在下一个屏幕上，我们为项目文件夹命名并选择我们喜欢的包管理器。
在下一个屏幕上，我们可以为项目选择预设。它可以是我们之前创建的默认，手动，远程或自定义预设。spa-simple 是自定义预设的示例。在这里，我们选择手动。
在这里插入图片描述在下一个屏幕上，我们选择要安装的插件。
最后，我们为我们选择安装的插件设置配置设置。当我们准备好时，我们点击 Create Project按钮。

在这里插入图片描述现在将创建项目，我们将被重定向到项目的仪表板。

使用Vue UI项目仪表板

在“ 插件”部分中，列出了所有已安装的插件。要安装新插件，我们点击添加插件按钮。
在这里插入图片描述安装插件后，我们可以在“ 配置”选项卡中设置选项。
在 Files changed选项卡中，我们可以检查受影响的文件以及方式。在这里，我不想提交任何更改，所以我点击了Skip按钮。
在Dependencies部分中，我们列出了所有主要和开发依赖项。要添加依赖项，请单击“ 安装依赖项”按钮。
在这里插入图片描述在模态窗口中，我们可以搜索主要或开发依赖项并安装它们。
在“ 配置”部分，我们可以自定义为我们添加的插件提供的设置。在这里，我们有Vue CLI本身和ESLint插件的设置。
该任务部分为我们提供了使用由Vue的CLI和其他插件提供的所有可用命令的便捷方式。在此屏幕上，serve选择任务。我们可以通过点击Parameters按钮来改变它的参数。
在这里插入图片描述在模态窗口中，我们选择要运行任务的参数。
当我们运行serve任务时，仪表板将更新一些有用的信息。
当我们切换到Output选项卡时，我们获取任务进程的日志。
当我们切换到Analyzer选项卡时，我们会得到一个很好的图表，它总结了整个项目的信息。

该build任务类似于该serve任务，但前者生成可用于部署应用程序的生产包。
在这里插入图片描述我们可以使用与build任务相同的方式为任务设置参数serve。
任务的“ 输出”字段inspect为我们提供有关已解析的Webpack配置的信息。
就是这样！我们使用Vue UI成功重建了我们的项目。但是，正如我们所看到的，当我们使用GUI时，创建和配置过程更容易，更愉快。

结论

在本教程中，我们了解到Vue CLI是一个用于现代Web开发的完整系统。它使我们能够快速，轻松地使用整个Vue生态系统和第三方工具。
当然，我们不需要为Vue.js项目使用Vue CLI。这完全是我们的选择。但是，当我们的目标是提高速度和质量时，Vue CLI可以帮助您以专业的方式创建，管理和部署我们的项目。

- LYN ..

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用vue-cil3

搬运英文原文 Boost Your Vue.js Workflow With Vue CLI 3前言：没有命令行界面（CLI）工具的帮助，我们很难想象现代Web开发。它们通过减少重复和繁琐任务的数量，极大地促进和加快了开发工作流程。手动设置项目，具有所有的linting，构建，测试，预处理，优化和依赖性跟踪功能，听起来不是一个有趣的工作，是吗？这就是为什么所有现代客户端开发框架（如Angul...
复制链接

扫一扫