如何安装Vue CLI并创建自己的第一个vue项目？安装Vue CLI最全教程！（内含MVVN与MVC区别详细讲解）

什么是vue？
vue(与view读音相同)是一个基于MVVM思想的JavaScript框架。

MVVM全名是Model-View-ViewModel包含有三部分，即M、V和VM，含义如下。
M : model(模型，表示数据)
V ：view (视图，表示界面)
VM：视图模型，用于模型和数据之间的转换
MVVM的基本思想时数据驱动视图，即视图的改变是通过数据的改变实现的，改变界面仅需改变数据。
目前主流的MVVM框架有angular、react和vue(是一个中国人尤雨溪研发的，目前比较火)

MVC全名是Model View Controller，即M V C，含义如下
模型(model)
视图(view)
控制器(controller)
MVC是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
经典的MVC框架有thinkPHP。

很多新手就会问到，MVVN和MVC有什么区别呢？这其中区别还是很大的。

MVC模式，将应用程序划分为三大部分，实现了前后分离，就是把页面和数据分开。
MVC模式需要频繁的操作DOM，这样页面就有大量DOM绑定与监听类的操作。
MVVM通过数据双向绑定让数据自动地双向同步，V修改数据自动同步M、M修改数据自动同步到V

总的来说，Vue就是这种MVVM模式的框架，无需开发人员手动操作DOM，开发人员只需要关注数据。
MVVM是一种更好的UI模式解决方案。

接下来进入正题，第一次使用vue的时候如何安装呢？
Vue CLI即Vue脚手架，是Vue.js开发的标准工具，通过Vue CLI组织管理基于Vue.js的项目开发，可以大大提高效率和应用的可维护性。
(1)安装Vue CLI
①安装Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，其中包含NPM包管理工具。
NPM是世界上最大的软件注册表（软件数据库），每星期大约有 30 亿次的下载量，包含超过 600000 个包（package/代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴，使您能够轻松跟踪依赖项和版本。目前JavaScript各种组件多以NPM包的形式存储于NPM上。
安装Node.js后就可以通过自带的npm命令下载js软件包了
Node.js的下载地址为：
https://nodejs.org/dist/v12.18.1/node-v12.18.1-x64.msi ，下载后的安装过程与安装普通的windows软件相同。

②安装cnpm工具
cnpm是淘宝提供的npm注册表国内镜像，cnpm工具是包的形式在NPM上存储，需要使用npm工具下载安装，命令如下：
npm install -g cnpm # 参数 -g表示全局安装

③通过cnpm安装Vue CLI
安装Vue CLI命令：cnpm install -g @vue/cli

安装完成之后，如何创建一个vue项目呢？
(1)进入cmd命令窗口，建立存放前端项目文件夹，示例如下：
E:
cd
mkdir prj
(2)进入建好的文件夹，创建vue项目，示例如下：


选择Manually select features

选择Babel（js编译器，可以将ES6代码编译为ES5以适应更多的浏览器）和Router（该选项引入路由管理，即路径管理）两项

选择n，即不使用HTML5的历史页操作api

选择In package.json，即配置信息统一在文件package.json中管理

选择N，即上述配置不保存为预设（保存预设，以后可以直接使用上述配置），项目稍等片刻即建好。

(3)进入项目文件夹，引入必要的js组件（axios、font-awesome和ElementUI等），示例如下：

(4)修改package.json,在该文件的最后加入图示配置：

(5)进入项目文件夹，键入命令npm run serve编译并启动项目，显示如下图所示即启动成功

(6)在浏览器，按照提示在地址栏输入地址访问即可。
(7)最后使用vscode将项目文件夹加入工作区，即可进行开发了。

本文略过了对idea和vscode安装教程，有需要可在评论区指出，我发布一篇相关文章。