提交 5b569c7a 编写于 作者: Z zhaoss

2.4.1小节习题、关键字添加

上级 35786cfc
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "3e849bc9f55a45fb8d83ee2929105dff"
......
{
"type": "code_options",
"author": null,
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "d8a4d2c5033b45ad8e3b5bcfe9b9c82f"
}
\ No newline at end of file
# vue-cli脚手架安装
<div style="color: pink;">小常识:</div>
<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。
脚手架是为了保证各施工过程顺利进行而搭设的工作平台
![在这里插入图片描述](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)
**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
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/7687d0d9971b4bda9546fea647c6c206.png)
总结: 如果出现版本号就安装成功, 否则失败
<br>
<div style="color: pink;">小测试:</div >
根据上方小常识,关于vue-cli的安装以下说法不正确的是<br/><br/>
## 答案
不可以使用cnpm命令
## 选项
### A
使用npm update -g @vue/cli 升级全局的 Vue CLI 包
### B
使用npm install -g @vue/cli 安装
### C
使用vue -V 命令查看安装成功的版本号
......@@ -622,45 +622,70 @@
{
"vue-cli脚手架安装": {
"node_id": "vue-a10eb688e16c4a02950b28fac1ce5ecb",
"keywords": [],
"keywords": [
"vue-cli",
"Vue脚手架"
],
"children": [],
"keywords_must": [],
"keywords_must": [
"Vue"
],
"keywords_forbid": []
}
},
{
"通过脚手架构建项目": {
"node_id": "vue-2230a98a405a4de28ac58228fd5b72d5",
"keywords": [],
"keywords": [
"脚手架创建项目",
"Vue创建项目",
"cli创建项目"
],
"children": [],
"keywords_must": [],
"keywords_must": [
"Vue"
],
"keywords_forbid": []
}
},
{
"vue-cli服务命令": {
"node_id": "vue-839da8c27a644e1fae0613354cad4758",
"keywords": [],
"keywords": [
"CLI服务"
],
"children": [],
"keywords_must": [],
"keywords_must": [
"Vue"
],
"keywords_forbid": []
}
},
{
"vue.config.js的配置": {
"node_id": "vue-d80da0184cd44dfd94e41e61e934a6cd",
"keywords": [],
"keywords": [
"vue.config.js",
"vue.config.js的配置"
],
"children": [],
"keywords_must": [],
"keywords_must": [
"Vue"
],
"keywords_forbid": []
}
},
{
"ESLint语法规则插件配置": {
"node_id": "vue-18d0903ef9a5424dae41e78f8545b5cf",
"keywords": [],
"keywords": [
"ESLint语法规则插件配置",
"ESLint"
],
"children": [],
"keywords_must": [],
"keywords_must": [
"ESLint"
],
"keywords_forbid": []
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册