前言

如果你用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

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