Vue-cli的简介与使用

1 简介

Vue 提供了一个官方的命令行工具(cli)，为单页面应用 (SPA) 快速搭建繁杂的脚手架。更多详情可查阅 Vue CLI 的文档。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

2 Vue CLI的组件

Vue CLI 有几个独立的部分——CLI、CLI服务和CLI插件

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

• 加载其它 CLI 插件的核心服务；
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

CLI 服务章节涵盖了它的具体用法。

CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

3 安装、卸载与升级

通过Node.js来管理vue-cli，所以需要有node环境。win+R打开cmd，输入以下命令，测试是否有node环境。

node --version

3.1 安装

在cmd中使用下面任意命令安装这个包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

测试是否安装成功，使用下面命令，出现版本号即为成功

vue --version

在这一步安装过慢的兄弟们可以看下，安装快的直接跳过 3.1.1 吧

3.1.1 补充：解决npm下载包慢的方法

一般情况下，nodejs需要的包文件存储在国外的服务器上，有时下载速度极慢，甚至存在不能下载的问题，为了解决这个问题，我们使用淘宝开发团队开发的【淘宝NPM镜像】，需要将系统中的npm替换成淘宝官方的cnpm。
用下面指令将node的包下载网址改为淘宝的npm镜像

npm config set registry http://registry.npm.taobao.org

3.2 卸载

在cmd中使用下面任意命令卸载

 npm uninstall vue-cli -g
 # OR
 yarn global remove vue-cli

3.3 升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

4 创建项目

4.1 命令行创建

# 在桌面desktop上创建一个名为 hello-world 的项目
cd desktop/
vue create hello-world

然后根据需求选择创建的vue项目版本，从上到下依次是：默认的vue 2版本、默认的vue 3版本和自定义版本，这里我选择默认的vue 3版本。

等待一会后，打开项目文件hello-world，然后再使用命令 npm run serve 启动该项目

项目启成功后通过浏览器进行访问测试

4.2 图形化窗口创建

使用命令 vue ui ，将会自动在浏览器中启动窗口

5 文件夹简单介绍（默认vue 3版本）

App.vue是vue项目的入口文件

components：存放要开发的独立的组件的目录

assest：存放静态的资源文件，比如图片和视频

vP2-1612792264616)]

[外链图片转存中…(img-zJSs4NJw-1612792264618)]

5 文件夹简单介绍（默认vue 3版本）

App.vue是vue项目的入口文件

components：存放要开发的独立的组件的目录

assest：存放静态的资源文件，比如图片和视频

public：放要打包生成的html文件的模板