vue-cli 3.x安装配置步骤详细说明

一、vue-cli 3.x简单介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统：是一个类似于 create-react-app 的可以用例命令行快速配置和生成一个 vue 项目。

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

具体工作：

1) 便捷的创建项目

2) 添加 vue 插件快速配置项目
3) 启动服务调试开发

4) HTML和静态资源 assets 的处理

5)配置 CSS ,配置 Webpack

6) 配置环境变量和环境模式: 针对不同环境进行打包, 发布项目

二、使用安装

1、node版本要求：vue cli 需要node版本>=8.9, （官方推荐：8.11.0+ ）。可使用node -v 命令去检测node的安装版本，如果没有安装可到这里安装：

中文官方下载地址：http://nodejs.cn/download/

2、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

命名方式已经改为npm推荐的新的包名规则，使用作用域。

包名规则介绍：https://zcfy.cc/article/the-npm-blog-new-package-moniker-rules

1）命令执行：

2）安装完成：

3）命令变化：可通过 vue -h 查看

1. create [options] <app-name> 创建一个由vue-cli-service支持的新项目
2. invoke <plugin> 在已创建的项目中添加插件
3. serve [options] [entry] 在开发者模式下以零配置运行一个js或vue文件
4. build [options] [entry] 在生产模式下以零配置构建一个js或vue文件
5. init <template> <app-name> 旧api 需要@vue/cli-init // 就是原来的vue-cli init <template> <app-name>

三、 搭建项目

1、命令：vue create project-name

******deMacBook-Pro:personal admin$ vue create cli-pro
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No

可以看到创建项目时会有个提示，会判断你对npm/yarn源的连接速度，询问你是否切换至淘宝镜像

首先，会提示你选择一个preset（预设）

? Please pick a preset:
> default (babel, eslint)  //默认
> Manually select features //手动选择功能

1）default路线

Pick the package manager to use when installing dependencies: //用哪个下载依赖
> Use Yarn
  Use NPM

安装完成：

Vue CLI v3.2.1
✨  Creating project in /Users/admin/personal/cli-pro.