本文共 1294 字，大约阅读时间需要 4 分钟。

是什么呢

什么是Vue CLI

Vue CLI 是 Vue.js 项目的官方脚手架工具

你知道吗

如果你只是简单写几个 Vue 的 Demo 程序，那么你不需要 Vue CLI

但如果你在开发大型项目，那么你需要，并且必然需要使用 Vue CLI

简单的项目

大型项目

为什么需要 Vue CLI

当你使用 Vue.js 开发大型应用时

你需要考虑许多事情

比如

• 代码目录结构

• 项目结构

• 部署

• 热加载

• 单元测试

如果每个项目都要手动完成这些工作

效率会很低

所以通常会使用脚手架工具

CLI 是什么意思

CLI 是 Command-Line Interface 的简称

直译为命令行界面

在技术圈里常说“脚手架”

Vue CLI 是什么？

Vue CLI 是 Vue.js 官方项目的脚手架

它可以帮助你快速搭建 Vue 开发环境

同时提供 webpack 配置

Vue CLI 长什么样子

图片插入位置

图片描述图片描述

Vue CLI 使用前提 Node

Node 是开发 Vue CLI 应用的环境

首先需要安装 Node.js

你可以直接去官方网站下载安装

地址：http://nodejs.cn/download/

安装 Node 和 npm

默认情况下会自动安装 Node 和 npm

Node 的环境版本要求 8.9 或更高

检查自己的 Node 版本和 npm 版本

Node 和 npm 的作用

• Node.js 是一种跨平台的命令行运行时环境

• npm 是 Node 的包管理工具

在开发中经常用它来安装依赖包

为了加快 npm 的镜像下载速度

推荐使用淘宝镜像 cnpm

如何安装 npm 镜像

可以使用以下命令安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以用 cnpm 命令来安装模块了

Webpack 的作用

Vue.js 官方脚手架工具使用了 Webpack 模板

Webpack 会对所有资源进行压缩和优化

它提供了一套完整的开发功能

让开发过程更加高效

安装 Webpack

可以使用 npm 全局安装

npm install webpack -g

安装 Vue CLI

为了使用 Vue CLI 全局安装

npm install -g @vue/cli

安装完成后可以通过

vue --version

查看是否安装成功 以及版本号

###老版本和新版本的区别

如果你需要使用 Vue CLI 2

可以安装旧版本

npm install -g @vue/cli-init

然后初始化项目

vue init webpack my-project

或者使用 Vue CLI 3

vue create my-project

初始化项目

无论使用哪个版本

都可以根据项目需求进行选择

总结

通过以上步骤

你已经了解了如何安装 Vue CLI 并创建项目

Vue CLI 可以帮助你快速搭建开发环境

减少重复工作

提高开发效率

这样的工具对于开发大型 Vue 项目非常有帮助