# Vue3Study

**Repository Path**: fenlinu/vue3-study

## Basic Information

- **Project Name**: Vue3Study
- **Description**: Vue3的学习项目
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-01
- **Last Updated**: 2024-10-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-study

**该案例通过一个小而全的todolist案例，能带你全方位入门 Vue3.0**

> todolist的案例基于vue框架的3.0版本进行实践，主要学习composition API的语法，通过此案例能够快速了解vue3的新特性，函数式编程的思想。
>

## 项目结构
```

项目结构：
.
├── .browserslistrc
├── .gitignore
├── .npmrc
├── babel.config.js
├── jsconfig.json
├── package.json
├── pnpm-lock.yaml
├── public
│   └── index.html
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── navFooter
│   │   │   └── NavFooter.vue
│   │   ├── navHeader
│   │   │   └── NavHeader.vue
│   │   └── navMain
│   │       └── NavMain.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   └── views
│       ├── AboutView.vue
│       ├── HomeView.vue
│       └── Start.vue
└── vue.config.js
```

### 结构解释

- **.browserslistrc**：配置浏览器兼容性列表，用于指定项目需要支持的浏览器版本。
- **.gitignore**：Git忽略文件列表，指定哪些文件和目录不应被Git版本控制。
- **.npmrc**：NPM配置文件，定义NPM的行为和设置。
- **babel.config.js**：Babel配置文件，用于配置JavaScript代码的转译规则。
- **jsconfig.json**：JavaScript项目配置文件，提供VS Code对JavaScript项目的智能提示和代码导航支持。
- **package.json**：项目的NPM配置文件，包含项目的依赖、脚本和其他元数据。
- **pnpm-lock.yaml**：PNPM的锁定文件，记录了确切的依赖版本以确保一致的依赖安装。
- **public/**：公共静态资源目录，通常包含不需要Webpack处理的文件。
- **index.html**：项目的入口HTML文件。
- **README.md**：项目的自述文件，包含项目的介绍、安装和运行说明。
- **src/**：源代码目录，包含项目的主要代码。
- **App.vue**：Vue应用的根组件。
- **assets/**：静态资源目录，通常包含图片、字体等资源。
- **components/**：组件目录，包含项目的Vue组件。
- **navFooter/**：包含导航页脚组件。
- **NavFooter.vue**：导航页脚组件文件。
- **navHeader/**：包含导航页头组件。
- **NavHeader.vue**：导航页头组件文件。
- **navMain/**：包含导航主体组件。
- **NavMain.vue**：导航主体组件文件。
- **main.js**：项目的入口JavaScript文件，通常用于初始化Vue实例。
- **router/**：路由配置目录。
- **index.js**：路由配置文件，定义应用的路由规则。
- **store/**：Vuex状态管理目录。
- **index.js**：Vuex状态管理的入口文件，定义应用的状态、变更和动作。
- **views/**：视图组件目录，包含应用的页面级组件。
- **AboutView.vue**：关于页面组件。
- **HomeView.vue**：主页组件。
- **Start.vue**：开始页面组件。
- **vue.config.js**：Vue CLI项目的配置文件，用于自定义Webpack配置和其他设置。


## 项目安装依赖
```
pnpm install
```

## 运行
```
pnpm run serve
```

## Vue3官方文档：https://cn.vuejs.org/