保姆级Vue脚手架安装_vue安装保姆级-CSDN博客

如果作类比的话，那么 npm + webpack ≈ maven 。

但是 webpack 的使用十分繁琐，为了简化使用，前端各大框架（不仅仅是 vue）都提供了所谓的 “脚手架” 。通过 “脚手架” 对 webpack 进行包装，简化使用。

所以，我们是 “直接使用脚手架，间接使用 webpack” 去管理、编译我们的 web 前端项目源码。

2、脚手架介绍

a、vue-cli简介

vue-cli 是 vue 的脚手架工具
作用 : vue-cli 提供了一条命令, 我们直接通过这条命令就可以快速的生成一个 vue 项目 (vue init XX) 。项目的基本结构、以及 webpack 配置项 全部配置 好了
为什么会有脚手架工具 ???

因为 webpack 配置繁琐, 阻止一批想用 vue 但是不会 webpack 的开发人员,所以作者直接将所有 vue 项目中用到的配置全部帮你写好了,这样,就不需要开发人员再去配置基础 webpack 配置项了
也就是说,使用 vue-cli 这个脚手架工具后,再也不用担心 webpack 配置问题了, 我们前端只需要写 vue 代码, 来实现功能即可

b、安装vue-cli4

vue-cli 换过一次名字。在 3.0 之前叫 vue-cli ，从 3.0 开始更名位 @vue/cli 。现在是 4.x 版本。

建议使用 @vue/cli 而非 vue-cli ，毕竟 vue-cli 太久远了。

删除已安装的 vue-cli

npm uninstall -g @vue/cli

先安装淘宝镜

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

安装cli

npm install -g @vue/cli

安装结束后，你可以通过 vue --version 或 vue -V 查看 vue-cli 的版本信息。

从 vue-cli 变更为 @vue/cli 时，对于它的使用（命令）也发生了变化。例如，创建项目的所使用的命令，以前是 vue init，后来就变为了 vue create 。

除了一些命令的改变，@vue/cli 还提供了一个 web 页面可用于创建项目。通过 vue ui 命令你可以启动这个内置的 web 服务在页面上创建 vue 项目。不过本质上和下面的命令行创建是一模一样的，要不要使用它随你

c、配置vue环境变量

把这个路径配到path里

3、创建vue-cli4项目（先不用路由）

第一步：创建项目

使用如下命令开始创建 vue 项目（这里示例项目名为 vue-cli-demo ）：
```
vue create 项目名
```
第一项和第二项（ default ...）表示的是使用默认配置创建 vue 项目。
第三项（ Manually ...）表示手动对 vue 项目的各方面进行设置。我们选择第三项 。

可以使用『上下方向键』来切换选项。

提示：如果只需要 babel 和 eslint 支持，不需要其它任何功能，那么选择第一项，就完事了。不过，我们在学习过程中一般不会使用 eslint 。
第二步

在上一步选中第二项后，你会看到如下界面：
在这个界面中，去需要去选择你的 vue 项目所要用到的特性。在特性列表中，Babel 和 Linter / Formatter 两项默认是选中的。

vue-cli 内置支持了 8 个功能特性，可以多选。使用『方向键』在特性选项之间切换，使用『空格键』选中当前特性，使用 a 键 切换选择所有，使用 i 键 翻转选项。

对于每一项的功能，此处做个简单描述：

Babel：支持使用 babel 做转义。
TypeScript：支持使用 TypeScript 书写源码。
Progressive Web App (PWA) Support PWA：支持。
Router：支持 vue-router。
Vuex：支持 vuex。
CSS Pre-processors：支持 CSS 预处理器。
Linter / Formatter：支持代码风格检查和格式化。
Unit Testing：支持单元测试。
E2E Testing： 支持 E2E 测试。

对于我们（非前端开发工程师、Java 全栈开发工程师、Java 后端开发工程师）而言，Babel 和 Router 是必选的。Vuex 和 CSS Pre-processors 可能会用到

选择vue版本为2，不要选3，不要选3

第三步

如果在功能选择界面中选中了 Router，那么我们接下来会看到如下界面（如果功能界面没有选择 Router，就会跳过这个界面）：

在这个界面中，vue-cli 在询问你，对于 Router 你是否以它的 history 模式使用它？默认值是 Yes 。

如果不使用 Router 的 history 模式，那自然就是 hash 模式。这里我们输入 n，表示使用 Router 的 hash 模式。