什么是 Vue JS CLI 3? (Vue 3) – 第 2 部分

介绍

在上一篇教程中,我们学习了如何安装 Vue JS 2 CLI 并设置一个简单的应用程序。 由于新品发布 Vue JS 3 命令行界面,我们决定创建一个新教程,重点介绍一些更新的功能,这些功能在这个高级开发框架方面非常出色。

新功能

创建项目

在旧 CLI 版本中,我们使用:

[root@host ~]# vue init webpack-simple myapp

在新的 CLI 版本中,我们运行:

[root@host ~]# vue create myapp

在旧版本的 Vue.js CLI 中,我们有四个不同的模板,每个模板都有自己的 webpack 配置。 在新的 Vue.js CLI 版本中,我们现在可以更灵活地自定义和选择我们喜欢的模板选项。

Vue CLI 版本 3 中的更新

注意:Vue CLI 预设是一个 JSON 对象,其中包含一组用于创建新项目的预定义选项和插件,因此用户无需通过提示来选择它们。

默认预设

  • 埃斯林特
  • 通天塔

自定义预设

  • Vuex
  • 路由器
  • pwa 支持
  • …… ETC

一旦我们创建了一个项目,Vue 仍然会抽象或隐藏 webpack 配置文件,但它不会像之前的版本那样锁定预制模板。

网页包

Webpack 是 Javascript 程序的模块打包器。 当 webpack 命令运行时,它从入​​口点开始,为整个应用程序构建依赖项大纲。 然后它将这些依赖项合并到一个或多个包中,这些包将包含在最终的应用程序中。

Webpack 配置

  • webpack 配置被抽象出来(隐藏)
  • 在 vue.config.js 中调整 webpack 配置
  • 其他插件也可以编辑 webpack 配置

插件

  • 扩展我们应用程序的功能和配置
  • 像典型的依赖一样行动,但也可以:
    • 编辑 webpack 配置
    • 编辑源文件(例如,模板)
    • 向 CLI 添加额外的命令

即时原型

  • 此功能使您能够快速将设计建模为单个独立组件
  • 开发单个组件无需搭建Vue项目
  • 能够快速启动并致力于一个新想法是令人难以置信的

图形用户界面

这个新组件是迄今为止我们最喜欢的功能。 我们更喜欢这个功能,因为所有其他 JS 框架主要限于命令行。 它极大地推动了整个框架,因为:

  • 我们可以轻松创建和监督多个项目
  • 我们可以有效地管理和安装依赖和插件

在即将到来的系列中,我们将深入探讨一些新功能(例如 Vue JS 的安装、Web Pack 自定义配置、即时原型制作)并看看有哪些可能性。 让我们开始吧!

功能深入

安装新的 CLI

先决条件

  • Node JS 8.9 或以上版本

可以使用以下说明完成安装

安装 nodesource 存储库

此命令将安装节点版本 12.X。

[root@host ~]# curl -sL https://rpm.nodesource.com/setup_12.x | bash -

执行上述命令后,您应该会看到类似以下的输出:

[root@host ~]# curl -sL https://rpm.nodesource.com/setup_12.x | bash -

## Installing the NodeSource Node.js 12.x repo...


## Inspecting system...

+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m

## Confirming "el7-x86_64" is supported...

+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Downloading release setup RPM...

+ mktemp
+ curl -sL -o '/tmp/tmp.axE3J2ni9b' 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Installing release setup RPM...

+ rpm -i --nosignature --force '/tmp/tmp.axE3J2ni9b'

## Cleaning up...

+ rm -f '/tmp/tmp.axE3J2ni9b'

## Checking for existing installations...

+ rpm -qa 'node|npm' | grep -v nodesource

## Run `sudo yum install -y nodejs` to install Node.js 12.x and npm.
## You may also need development tools to build native addons:
  sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
  curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
  sudo yum install yarn

[root@host ~]#

接下来,我们安装 Node JS 及其依赖项:

[root@host ~]# yum install -y nodejs gcc-c++ make
Loaded plugins: fastestmirror, priorities, tmprepo
Determining fastest mirrors
epel/x86_64/metalink | 16 kB 00:00:00
* base: mirrors.BYNSS.com
* epel: mirrors.BYNSS.com
* extras: mirrors.BYNSS.com
* updates: mirrors.BYNSS.com
base | 3.6 kB 00:00:00
epel | 5.3 kB 00:00:00
extras | 2.9 kB 00:00:00
group_spacewalkproject-java-packages | 3.3 kB 00:00:00
nodesource | 2.5 kB 00:00:00
spacewalk | 3.6 kB 00:00:00
updates | 2.9 kB 00:00:00
(1/7): epel/x86_64/group_gz | 90 kB 00:00:00
(2/7): epel/x86_64/updateinfo | 1.0 MB 00:00:00
(3/7): extras/7/x86_64/primary_db | 153 kB 00:00:00
(4/7): epel/x86_64/primary_db | 6.9 MB 00:00:00
(5/7): updates/7/x86_64/primary_db | 4.2 MB 00:00:00
(6/7): nodesource/x86_64/primary_db | 27 kB 00:00:00
(7/7): group_spacewalkproject-java-packages/primary_db | 73 kB 00:00:00
Package 1:make-3.82-24.el7.x86_64 already installed and latest version
Resolving Dependencies
--> Running transaction check
---> Package gcc-c++.x86_64 0:4.8.5-39.el7 will be installed
...
...
...
Dependencies Resolved

===================================================================================================================================
Package Arch Version Repository Size
===================================================================================================================================
Installing:
gcc-c++ x86_64 4.8.5-39.el7 base 7.2 M
Updating:
nodejs x86_64 2:12.13.1-1nodesource nodesource 20 M
Installing for dependencies:
cpp x86_64 4.8.5-39.el7 base 5.9 M
gcc x86_64 4.8.5-39.el7 base 16 M
glibc-devel x86_64 2.17-292.el7 base 1.1 M
glibc-headers x86_64 2.17-292.el7 base 687 k
kernel-headers x86_64 3.10.0-1062.4.3.el7 updates 8.7 M
libmpc x86_64 1.0.1-3.el7 base 51 k
libstdc++-devel x86_64 4.8.5-39.el7 base 1.5 M
mpfr x86_64 3.1.1-4.el7 base 203 k

Transaction Summary
===================================================================================================================================
Install 1 Package (+8 Dependent packages)
Upgrade 1 Package

Total download size: 62 M
Downloading packages:
No Presto metadata available for nodesource
(1/10): cpp-4.8.5-39.el7.x86_64.rpm | 5.9 MB 00:00:00
(2/10): gcc-c++-4.8.5-39.el7.x86_64.rpm | 7.2 MB 00:00:00
(3/10): gcc-4.8.5-39.el7.x86_64.rpm | 16 MB 00:00:00
(4/10): glibc-devel-2.17-292.el7.x86_64.rpm | 1.1 MB 00:00:00
(5/10): glibc-headers-2.17-292.el7.x86_64.rpm | 687 kB 00:00:00
(6/10): libmpc-1.0.1-3.el7.x86_64.rpm | 51 kB 00:00:00
(7/10): mpfr-3.1.1-4.el7.x86_64.rpm | 203 kB 00:00:00
(8/10): libstdc++-devel-4.8.5-39.el7.x86_64.rpm | 1.5 MB 00:00:00
(9/10): kernel-headers-3.10.0-1062.4.3.el7.x86_64.rpm | 8.7 MB 00:00:00
(10/10): nodejs-12.13.1-1nodesource.x86_64.rpm | 20 MB 00:00:00
-----------------------------------------------------------------------------------------------------------------------------------
Total 50 MB/s | 62 MB 00:00:01
Running transaction check
Running transaction test
Transaction test succeeded
...
...
...
Installed:
gcc-c++.x86_64 0:4.8.5-39.el7                                                 

Dependency Installed:
cpp.x86_64 0:4.8.5-39.el7 gcc.x86_64 0:4.8.5-39.el7 glibc-devel.x86_64 0:2.17-292.el7
glibc-headers.x86_64 0:2.17-292.el7 kernel-headers.x86_64 0:3.10.0-1062.4.3.el7 libmpc.x86_64 0:1.0.1-3.el7
libstdc++-devel.x86_64 0:4.8.5-39.el7 mpfr.x86_64 0:3.1.1-4.el7 

Updated:
nodejs.x86_64 2:12.13.1-1nodesource                                              

Complete!
[root@host ~]# 

接下来,我们可以通过简单的输入来验证 node.js 是否已安装:

[root@host ~]# node --version 
v12.13.1
[root@host ~]# 

如果安装正确,此命令将显示版本为 v12.13.1(版本号可能因安装日期而异)。

注意:如果您使用了之前的 vue.js 教程并安装了较旧的 CLI 版本,我们建议您通过发出以下命令将其删除:

[root@host ~]# npm uninstall -g vue-cli

这将从服务器中删除旧的 vue.js 2 CLI。

现在我们已经安装并检查了 NodeJS 的版本,我们现在可以安装新的 CLI 版本

oot@host ~]# npm install -g @vue/[email protected] 

注意:在本文发布时,Vue.js 4 现已发布,但出于本教程的目的,我们将安装 Vue.js 3 CLI)

此命令应提供类似于以下信息的输出:

[root@host ~]# npm install -g @vue/[email protected]
npm WARN deprecated [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
/usr/bin/vue -> /usr/lib/node_modules/@vue/cli/bin/vue.js

> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/protobufjs
> node scripts/postinstall


> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate


> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@vue/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @vue/[email protected]
added 706 packages from 525 contributors in 33.588s
[root@host ~]# 

现在我们可以使用以下命令检查 vue 的版本:

[root@host ~]# vue --version
3.0.5
[root@host ~]#

该命令将向我们展示 Vue CLI 的 3.0.5 版本。

现在我们已经安装了新的 Vue 3 CLI,让我们通过输入以下命令将目录更改为我们的 cPanel 用户文件夹:

ot@host ~]# su $USER 

然后将目录更改为我们的域 public_html 文件夹
($user – 代表我们的 cPanel 用户名)

完成后,我们应该在我们的域文档根目录中 – public_html

[lwvuejs@host ~]# cd /home/$USER/public_html 
[lwvuejs@host ~]# pwd 
[lwvuejs@host ~]# /home/$USER/public_html 

现在我们准备创建我们的第一个 Vue 3 项目。 在本系列的下一篇文章中,我们将深入探讨使用 Vue.js 以及如何使用 Vue 创建一个简单的项目。 敬请关注!

今天就开始吧!

利用 Vue JS 等框架来构建应用程序或二进制文件现在比以往任何时候都容易。 通过利用一些世界上最强大的专用和虚拟服务器,我们提供了运行这些应用程序的强大功能! 我们还拥有业内一些最聪明、最敬业的支持管理员,因此您的开发团队可以专注于他们的项目,并确保他们拥有世界领先的技术支持之一。