简单聊聊vue-cli

---

一、VueCLI是什么？

VueCLI是一个官方发布vue.js项目脚手架，使用 VueCLI 可以快速搭建 vue 开发环境，以及对应的 webpack 配置。

CLI 是 Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。所以说这是一个创建vue项目的命令行界面工具。

实际上，vue-cli是一个node包，且可以在终端直接通过vue命令调用。
看一下vue-cli的package.json，可以发现如下代码：
{
“bin”: {
“vue”: “bin/vue”,
“vue-init”: “bin/vue-init”,
“vue-list”: “bin/vue-list”,
“vue-build”: “bin/vue-build”
}
}
在全局安装vue-cli后，npm会帮你注册vue, vue-init, vue-list, vue-build这几个命令。

二、vue-cli和npm之间的关系

npm是node.js 的包管理器，vue-cli是一个node包。有兴趣的小伙伴可以去看看npm的源码。vue-cli的安装也需要npm

npm install vue-cli -g

如果项目的package.json里有vue以及vue-cli，在下载依赖的时候会根据下载一个本地的vue环境。某种意义上没有vue-cli对我们的开发没有任何的影响，会对新建项目产生一定的影响。vue-cli的版本和vue的版本不一样。
Vue CLI 4.5以下，对应的是Vue2
Vue CLI 4.5及以上，对应的是Vue3

vue -V //查看vue-cli版本

npm list vue//查看vue版本

全局安装的vue-cli也不会影响某个项目下的vue版本。

三、为什么需要先安装node

Vue.js自身不是一个全能框架,它只聚焦于视图层,非常容易与其它库或已有项目整合。而node可以提供包管理工具,整个项目就能实现模块化组件化,并且按需加载。

总结

1，vue-cli是一个官方发布vue.js项目脚手架。
2，项目本地有vue等环境就可以运行，创建项目需要全局的vue相关环境。
3，Vue.js自身不是一个全能框架,它只聚焦于视图层,非常容易与其它库或已有项目整合。而node可以提供包管理工具,整个项目就能实现模块化组件化,并且按需加载。