exercises.md 2.4 KB
Newer Older
Z
zhaoss 已提交
1 2
# vue-cli脚手架安装

Z
zhaoss 已提交
3
 <div style="color: pink;font-size:22px;font-weight:700">小常识:</div>
Z
zhaoss 已提交
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<br>

**介绍**
目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service),该依赖:
可升级;
基于 webpack 构建,并带有合理的默认配置;
可以通过项目内的配置文件进行配置;
可以通过插件进行扩展。
一个丰富的官方插件集合,集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

  脚手架是为了保证各施工过程顺利进行而搭设的工作平台

Z
zhaoss 已提交
23 24
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/37dd9466b3074d74be4bb5120a3c5d2c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
<br/>
Z
zhaoss 已提交
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61


**vue-cli的好处**

 开箱即用

  0配置webpack

  babel支持

  css, less支持

  开发服务器支持

**vue-cli安装**

 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

全局安装命令

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

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c 
停止重新来

换一个网继续重来

安装成功后检验:查看`vue`脚手架版本

```bash
vue -V
```

Z
zhaoss 已提交
62 63
<br/>![在这里插入图片描述](https://img-blog.csdnimg.cn/7687d0d9971b4bda9546fea647c6c206.png)
<br/>
Z
zhaoss 已提交
64 65 66 67 68

总结: 如果出现版本号就安装成功, 否则失败

<br>

Z
zhaoss 已提交
69
 <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试:</div>
Z
zhaoss 已提交
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91



根据上方小常识,关于vue-cli的安装以下说法不正确的是<br/><br/>

## 答案

不可以使用cnpm命令

## 选项

### A

使用npm update -g @vue/cli  升级全局的 Vue CLI 包

### B

使用npm install -g @vue/cli  安装

### C

使用vue -V 命令查看安装成功的版本号