项目：01-从0搭建Vue3工程

## 一：开发工具
⭐VSCode
(注：需下载nodejs，相当于前端的maven,配置前端依赖。自带npm，负责下载vue工程所需要的依赖)
## 二：创建Vue脚手架
#### 1.新建文件夹(project01)，并在此文件夹路径下打开cmd命令行窗口
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/f9a60a84-11b9-8b18-614c-61efe87cb99a.png)
#### 2.在命令行输入指令：npm create vue@latest
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c783413f-3050-1737-c6c1-32286d368aac.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/16574398-a273-3633-af0c-264aafe63973.png)
#### 3.用VSCode打开项目
#### 4.项目瘦身
①删除多余文件
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/ea132af8-4a91-0fd7-5a82-d3ddd38f0ec9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/fbe6039f-8b06-9304-c121-8a2ac51033c8.png)
②改造HomeView,删除AboutView
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/7d9593ee-16df-67a2-ca20-e8e1aa2d294b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/10117fe9-9f2e-03bf-db13-923cdbeb3f08.png)
③精简路由
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/075aad83-4727-b191-6976-7a83790fcce5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/83489eb4-8be7-0c26-885c-1f0469f1175e.png)
④精简APP.VUE
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/3afe5728-c612-958d-e505-66e4515853d7.png)
⑤简化main.js,删除无用的导包
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/8f5f0158-dc1d-6040-7d57-6a4a012ed247.png)
## 三：Vue基础语法
## 1.绑定数据
⭐方法一：通过ref去定义一个数据
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/b8798307-af7c-9726-2b88-e96455160cb6.png)
⭐方法二：通过reactive去定义一个数据（常用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/d75c1ce5-99a0-3e72-adcb-4a63ac0a906f.png)
## 2.v-model
通过表单形式绑定数据
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/db1333f8-8619-52fc-0d60-aadc95f5ae9d.png)
双向绑定：数据可以在用户输入的时候发生实时的变化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/168368b5-c4d7-db1f-f995-d63c8c598e31.png)
## 3.v-if v-else 
根据变量的值动态的去判断样式
只有v-if里面的条件满足的情况下，span才能够渲染出来
同时使用两种引号的时候，不能同时使用双引号，使用一个双一个单
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/a655289e-4384-95be-35db-3644738ed735.png)
## 4.v-for
把三个数字放到三个不同的div里面去
item表示arr里的每一项
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/851c6e2a-2ba7-c430-8720-f69469d59462.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/82174406-ef00-e654-c311-7db59b29239c.png)
## 5.v-on：事件绑定
两种写法：
①v-on：
②@
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/f25855db-2020-6d71-ef98-adb44387bb8c.png)
## 6.v-bind 
动态的去设置属性，是可以通过数据去渲染的，数据是可以从后台获取的
两种写法：①v-bind：②：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5f079bad-bc89-d18f-e732-4ce3307804b8.png)
## 7.onMounted：生命周期函数
在页面元素完全加载完成之后触发 页面元素加载需要时间
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5a68d68e-96ea-2624-eefc-1caeaded2311.png)
## 四：注意
⭐VUE官网:https://cn.vuejs.org/  
⭐打开命令行快捷键：cmd+R   
⭐验证软件是否安装好,在命令行输入：软件名 -v  
⭐中断程序：命令行ctrl+c
⭐VSCode中→终端→新建终端→启动指令：npm run dev
⭐菜鸟教程css：https://www.runoob.com/css/css-tutorial.html
⭐学习vue3：https://www.runoob.com/vue3/vue3-tutorial.html
⭐main.js里面引入全局的css
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/4cd3249d-9503-97cf-f352-706e7ac56849.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/fe6e0785-a0b7-3429-d308-9da723db4674.png)
⭐设置字体样式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/2dec27a7-78f1-c808-62c6-3974c46558d4.png)
⭐设置间距
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/0e735d82-dcd8-772d-3c39-c20c875d706a.png)