1、創(chuàng)建 Vue3 工程
基于 vue-cli 創(chuàng)建（基于webpack實現(xiàn)）
備注：目前
vue-cli已處于維護模式，官方推薦基于Vite創(chuàng)建項目。
// 查看 @vue/cli版本，確保@vue/cli版本在4.5.0以上
vue --version
// 安裝或者升級你的@vue/cli
npm install -g @vue/cli
// 執(zhí)行創(chuàng)建命令
vue create vue_demo
基于 vite 創(chuàng)建（推薦）
-
vite是新一代前端構建工具，官網(wǎng)地址：https://vitejs.cn -
vite的優(yōu)勢如下：- 輕量快速的熱重載（HMR），能實現(xiàn)極速的服務啟動。
- 對
TypeScript、JSX、CSS等支持開箱即用。 - 真正的按需編譯，不再等待整個應用編譯完成。
- 創(chuàng)建項目請看上面筆記
- https://blog.csdn.net/qq_33365152/article/details/132917242
2、Vue3 項目開發(fā) vscode 插件推薦
自動補充 ref 變量 value 插件配置方法 
文章來源：http://www.zghlxwxcb.cn/news/detail-828515.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-828515.html
3、Vue3 核心語法
【optionsAPI】與【CompositionAPI】
-
Vue2的API設計是Options（配置）風格的。（選項式API） -
Vue3的API設計是Composition（組合）風格的。
Options API 的弊端
-
Options類型的API，數(shù)據(jù)、方法、計算屬性等，是分散在：data、methods、computed中的，若想新增或者修改一個需求，就需要分別修改：data、methods、computed，不便于維護和復用。
Composition API 的優(yōu)勢
- 可以用函數(shù)的方式，更加優(yōu)雅的組織代碼，讓相關功能的代碼更加有序的組織在一起。
4、【拉開序幕的 setup】
- setup概念
-
setup是Vue3中一個新的配置項，值是一個函數(shù)，它是Composition API“表演的舞臺”，組合中所用到的：數(shù)據(jù)、方法、計算屬性、監(jiān)聽…等等，均配置在setup中。 - 特點如下：
-
setup函數(shù)返回的對象中的內(nèi)容，可直接在模板中使用 -
setup中訪問this是undefined -
setup函數(shù)會在beforeCreate之間調(diào)用，它是“領先”所有鉤子執(zhí)行的。
-
5、Vue3 自定義組件命名插件推薦
- 插件名稱
vite-plugin-vue-setup-extend - 安裝
npm install vite-plugin-vue-setup-extend -D
- 配置，在
vite.config.ts文件中
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
fileURLToPath, URL } from "node:url";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
export default defineConfig({
plugins: [vue(到了這里，關于最新 Vue3、TypeScript、組合式API、setup語法糖 學習筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
