前言
如果你用Vue搭建过项目,应该都熟悉vue init webpack projectName
命令,至于为什么是这个命令,相信了解的人不是特别多,反正我能用就行了。现在我们就来好好了解一波。
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使用图形化界面
这是一个非常大的改动,对于不喜欢终端(dos面板)里输入命令的小伙伴,它可以说是你的福音。可以直接通过 vue ui
命令以图形化界面创建和管理项目:
vue ui
执行上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。