# vue3-learn

**Repository Path**: sweetwisdom/vue3-learn

## Basic Information

- **Project Name**: vue3-learn
- **Description**: vue3 学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-23
- **Last Updated**: 2023-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3+TS + Vite 学习笔记

## 资源

Vue3官网:[介绍 | Vue.js (vuejs.org)](https://v3.cn.vuejs.org/guide/introduction.html#vue-js-是什么)

vite:[Home | Vite中文网 (vitejs.cn)](https://vitejs.cn/)

迁移指南:[介绍 | Vue.js (vuejs.org)](https://v3.cn.vuejs.org/guide/migration/introduction.html)

(script setup 语法糖):[单文件组件  | Vue.js (vuejs.org)](https://v3.cn.vuejs.org/api/sfc-script-setup.html#基本语法)

快速上手:[Vue3+TS 快速上手 (gitee.io)](http://huaxhe.gitee.io/vue3_study_docs/)


![image-20211124000252097](.imgs/image-20211124000252097.png)


## 插件

### Devtools 扩展

我们正在开发一个新版本的 Devtools，它有一个新的 UI 和经过重构的内部结构，以支持多个 Vue 版本。新版本目前处于测试阶段，目前只支持 Vue 3。Vuex 和 Router 的集成也在进行中。

- Chrome：[从 Chrome web 商店中安装](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en)
  - 提示：beta 版本可能与 devtools 的稳定版本冲突，因此你可能需要暂时禁用稳定版本，以便 beta 版本正常工作。
- Firefox：[下载签名扩展](https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.2) (assets 下的 `.xpi` 文件)

### 编辑器

推荐使用 [VSCode](https://code.visualstudio.com/) 和我们官方拓展 [Volar](https://github.com/johnsoncodehk/volar)，它为 Vue 3 提供了全面的 IDE 支持



### 其他项目

| 项目                  | npm                                                          | 仓库                                                         |
| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| @vue/babel-plugin-jsx | [![rc](https://img.shields.io/npm/v/@vue/babel-plugin-jsx.svg)](https://www.npmjs.com/package/@vue/babel-plugin-jsx) | [[Github](https://github.com/vuejs/jsx-next)]                |
| eslint-plugin-vue     | [![beta](https://img.shields.io/npm/v/eslint-plugin-vue.svg)](https://www.npmjs.com/package/eslint-plugin-vue) | [[Github](https://github.com/vuejs/eslint-plugin-vue)]       |
| @vue/test-utils       | [![beta](https://img.shields.io/npm/v/@vue/test-utils/next.svg)](https://www.npmjs.com/package/@vue/test-utils/v/next) | [[Github](https://github.com/vuejs/vue-test-utils-next)]     |
| vue-class-component   | [![beta](https://img.shields.io/npm/v/vue-class-component/next.svg)](https://www.npmjs.com/package/vue-class-component/v/next) | [[Github](https://github.com/vuejs/vue-class-component/tree/next)] |
| vue-loader            | [![rc](https://img.shields.io/npm/v/vue-loader/next.svg)](https://www.npmjs.com/package/vue-loader/v/next) | [[Github](https://github.com/vuejs/vue-loader/tree/next)]    |
| rollup-plugin-vue     | [![beta](https://img.shields.io/npm/v/rollup-plugin-vue/next.svg)](https://www.npmjs.com/package/rollup-plugin-vue/v/next) | [[Github](https://github.com/vuejs/rollup-plugin-vue/tree/next)] |