Vue CLI的详细介绍与讲解

什么是Vue CLI

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。
如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI。
在使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思?

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI使用前提

安装Node.JS

在官方网站中下载安装NodeJs

cnpm安装

由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue CLI使用前提 - Webpack

Vue.js官方脚手架工具就使用了webpack模板。对所有的资源会压缩等优化操作，它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

Webpack的全局安装

npm i webpack -g

Vue CLI的使用

初始化 Vue2 项目

npm i -g @vue/cli-init			# vue2脚手架，是使用下方初始化工程命令的前提
vue init webpack my-project		# 生成vue2工程模板，使用 webpack 作为打包工具

初始化 Vue3 项目

# 方式一
npm install -g @vue/cli			# vue3脚手架
vue create my-project			# 生成vue3工程模板，使用 vue-cli 作为打包工具

# 方式二
npm init vue@latest			# 生成vue3工程模板，使用 vite 作为打包工具