[VUE] Vue-CLI的安装、使用及环境配置（超详细）

Vue CLI 是一个基于 Vue 进行快速项目开发的工具。它可以提供可交互式的项目脚手架和运行时的服务依赖，帮助你快速完成一个风格统一、拓展性强的现代化 web 单页面应用。

Vue-CLI  所需环境

Vue-CLI 是一个需要全局安装的NPM包，安装需要在 Node.js 环境下进行。

检查 Node 环境：

node -v

执行上面的命令之后，如果终端输出版本号，表示 Node.js 已安装；反之则无； 

可 Node.js 官网自行下载：https://nodejs.org/zh-cn/

 详细安装指南可参考：Node.js的安装及环境配置【超详细】_huangfuyk的博客-CSDN博客

安装 Vue-CLI

1、全局安装

执行 npm install -g @vue/cli 全局安装

npm install -g @vue/cli

如果安装过程中出现错误如下：

Unhandled rejection Error:EACCES:permission denied

表示当前的操作系统权限不足，可输入以下命令重新安装：

sudo npm install -g @vue/cil

添加 sudo 表示使用超级管理员权限进行安装，过程中需要你输入设备的启动密码。

2、检查是否安装完成

执行 vue –version 或 vue-V 检查是否安装完成，如果终端输出版本号，表示 Node.js 已安装；反之则无； 

vue --version

快速搭建项目

1、命令行创建项目

（1）执行vue create one-project ，创建一个项目名称为 one-project 的项目；

vue create one-project

（2） 可选择 Vue2 、Vue3 版本或者自定义设置，出现 $ cd one-project 和 $ npm run serve，代表已安装完成。如下图所示：

（3）执行 cd one-project 进入文件

 cd one-project

（4）执行 npm run serve 即可运行项目

npm run serve

（5） 打开链接即可看到，domo 页面

2、图形化工具创建项目

（1）命令行输入 vue ui ，获取图形化页面创建工程的链接，在浏览器中打开；

vue ui

 浏览器页面如下图所示：

（2）点击【创建】 ==》点击【+在此创建新项目】 

（3）输入项目信息（项目名：two-project）==》点击【下一步】

 （4）选择版本或自定义，点击【创建项目】

（5）等待创建完成即可，如下图

接下来就可以进行开发啦