vue

Vue-CLI是什么?Vue-CLI2.x到Vue-CLI3.x有哪些进步?

前言

如果你用Vue搭建过项目,应该都熟悉vue init webpack projectName命令,至于为什么是这个命令,相信了解的人不是特别多,反正我能用就行了。现在我们就来好好了解一波。

Vue-CLI是什么?Vue-CLI2.x到Vue-CLI3.x有哪些进步?

Vue-CLI是什么?

Vue-CLI是Vue.js的脚手架,用于自动生成vue.js+webpack的项目模板。运行vue init webpack projectName命令,就必须装Vue-CLI。然后我们来看看官方怎么说:

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

1、通过 @vue/cli 搭建交互式的项目脚手架。

2、通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

3、一个运行时依赖 (@vue/cli-service),该依赖:
(1)可升级;
(2)基于 webpack 构建,并带有合理的默认配置;
(3)可以通过项目内的配置文件进行配置;
(4)可以通过插件进行扩展。

4、一个丰富的官方插件集合,集成了前端生态中最好的工具。

5、一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

CLI (@vue/cli) 就是一个全局安装的 npm 包,提供了终端(dos面板)里的 vue命令。它可以通过 vue init/vue create 快速创建一个新项目的脚手架,或者直接通过 vue serve 构建新想法的原型。在Vue-CLI3.x中,你还可以通过 vue ui 通过一套图形化界面管理你的所有项目。

ok,你们能直接运行命令生成vue项目,都要归功于CLI模块。

Vue-CLI2.x到Vue-CLI3.x有哪些进步?

一、创建项目命令变了

# Vue-CLI2.x
vue init webpack project-name

# Vue-CLI3.x
vue create project-name

同时大家可以看看Vue-CLI3.x vue create 命令有一些可选项

用法:create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目

选项:
  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

二、Vue-CLI3.x使用图形化界面
Vue-CLI是什么?Vue-CLI2.x到Vue-CLI3.x有哪些进步?

这是一个非常大的改动,对于不喜欢终端(dos面板)里输入命令的小伙伴,它可以说是你的福音。可以直接通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

执行上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注