# Z21级vue3的学习

**Repository Path**: yuanmatansuo/learning-of-z21-level-vue3

## Basic Information

- **Project Name**: Z21级vue3的学习
- **Description**: 学习库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-03
- **Last Updated**: 2024-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE3学习

## vue官网

https://cn.vuejs.org/guide/quick-start.html

## 需要安装node.js

- 已安装 18.3 或更高版本的 [Node.js](https://nodejs.org/)

### 验证安装成功

node -v 验证是否安装成功node.js

### 什么是npm？

包管理器  == maven

## pnpm官网

https://www.pnpm.cn/

### 安装

```
npm install -g pnpm
```

### 如果安装不上

换一下npm的镜像地址

```
npm config set registry https://registry.npmmirror.com/
```



## 创建工程

```
C:\Users\Administrator>cd Desktop  切换到桌面

C:\Users\Administrator\Desktop>pnpm create vue@latest  创建工程
```

![image-20240902152534113](VUE3学习.assets/image-20240902152534113.png)

```
  cd vue-learning  进入工程
  pnpm install 下载依赖
```



## 熟悉工程

![image-20240902161626501](VUE3学习.assets/image-20240902161626501.png)



## 运行工程

package.json 里面有个运行点击第一个

如果提示 因为在此系统上禁止运行脚本。

![image-20240902161833795](VUE3学习.assets/image-20240902161833795.png)

![image-20240902162014009](VUE3学习.assets/image-20240902162014009.png)

```
set-executionpolicy remotesigned
```



## 安装扩展

![image-20240902162406138](VUE3学习.assets/image-20240902162406138.png)





## 什么是组件？

组件的诞生就是用于封装前端代码，提高代码复用性。

### 如何封装？

.vue 的后缀的文件格式

.vue文件就是一个 组件（样式css、骨架html、脚本js）





## MVVM

单向数据绑定  Model > View         : 和{{ }}

双向数据绑定  v-model

![image-20240903205609520](VUE3学习.assets/image-20240903205609520.png)





## 组件

![image-20240904100101708](README.assets/image-20240904100101708.png)

组件分为两个大类，一个叫视图组件，一个叫普通组件，视图组件是和路由绑定的



## 路由

用于匹配什么地址显示什么页面组件用的