vue-cli

是一个脚手架可以快速去构建基于vuejs项目（快速的组织一些页面的结构，引入 vuejs 单组件的管理方式）。
注意：目前 vue-cli 的版本是4.x（刚刚升级上来的，之前一直使用的都是 2.x 版本，并且 2.x 的版本的使用和3.x版本的使用稍微有些不一样的）。

vue-cli的安装

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

注意

无论使用的 npm 或者 yarn 都是全局。现在我们需要注意一些事情，现在企业开发项目的时候，不建议把这些工具包安装成全局的。

为什么不要把这些包安装成全局？

• 现在这些工具包升级非常的快，但是我们开发的一些项目基本都是存在高低版本的兼容性问题。
• （好比：项目一是一年前开发的，基于某个工具的2.x版本开发的。经过一年后（小明，刚入职），公司开发了一个项目二，项目二是基于工具的3.x版本开发的（一般主版本号变了之后，工具会存在很大的兼容性问题，就是高版本里面部分的支持低版本的写法，导致高低版本的使用方式不一样）不能实现在一台电脑上保证两个项目的正常的运行。
• 这个时候就不能把这些工具包安装成全局，那么我们应该是在每个项目的目录下，为各自的项目安装好各自的工具的依赖。项目一的自己的目录下局部安装工具2.x；项目二的自己的目录下局部安装工具3.x。

如果是局部安装后，也会有些问题？

• 如果某个工具包是局部安装（如果是局部安装的包的相关的命令是没有被添加到电脑的系统的环境变量里面的），则这个工具包相关的命令不能被使用了。
• 为了解决这个问题，node 里面引入一个 npx 的相关的命令，有了这个命令之后，我们可以使用 npx 去执行局部安装的工具包的相关的命令。

如何使用的 npx？

npx 是nodejs自带的，不需要单独安装

1. 工具包局部安装
cd AppName
yarn init -y

#下面就是代表局部安装，这个 @vue/cli 工具会提供一个 vue 命令，局部的使用，只需要在 vue 命令	的前面加上一个 npx 
yarn add @vue/cli

# 2. npx 执行局部的命令
npx vue create AppName
或者
npx vue ui
# 3，让项目跑起来
yarn serve

如何在 vue-cli 4.x(3.x) 里面 使用 vue-cli 2.x 相关的命令？

• 主要是 2.x 提供的命令和 4.x(3.x)命令方式是不一样的。
• 解决方案
  （1）安装如果是有个桥接工具
  yarn global add @vue/cli-init
  （2）成功桥接后，使用如下的命令快速的初始化一个 基于 vuejs 的项目
  • vue init webpack 固定写法，不能改变。这里的 webpack 代表是使用一个 webpack 的模板进行构建。
    vue init webpack my-project

npx 文档（参考文档）

http://www.ruanyifeng.com/blog/2019/02/npx.html