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)等待创建完成即可,如下图
接下来就可以进行开发啦