為什么要學(xué)vue3
1、Vue是國(guó)內(nèi) 最火的前端框架
2、Vue3是2020年09月18日正式發(fā)布的
目前以支持Vue3的UI組件庫(kù)
| 庫(kù)名稱(chēng) | 簡(jiǎn)介 |
|---|---|
| ant-design-vue | PC 端組件庫(kù)：Ant Design 的 Vue 實(shí)現(xiàn)，開(kāi)發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品 |
| arco-design-vue | PC 端組件庫(kù)：字節(jié)跳動(dòng)出品的企業(yè)級(jí)設(shè)計(jì)系統(tǒng) |
| element-plus | PC 端組件庫(kù)：基于 Vue 3，面向設(shè)計(jì)師和開(kāi)發(fā)者的組件庫(kù) |
| Naive UI | PC 端組件庫(kù)：一個(gè) Vue 3 組件庫(kù)，比較完整，主題可調(diào)，使用 TypeScript，快，有點(diǎn)意思 |
| vant | 移動(dòng)端組件庫(kù)：一個(gè)輕量、可靠的移動(dòng)端組件庫(kù)，于 2017 年開(kāi)源 |
| VueUse | 基于 composition 組合式 api 的常用函數(shù)集合 |
Vue3的優(yōu)點(diǎn)特點(diǎn)
Vue3設(shè)計(jì)理念?組合式 API 征求意見(jiàn)稿 | Vue 組合式 API/
-
首次渲染更快
-
diff 算法更快
-
內(nèi)存占用更少
-
打包體積更小
-
更好的 Typescript 支持
-
Composition API組合 API
Vite構(gòu)建工具
Vite介紹
Vite 官方文檔：Vite | 下一代的前端工具鏈/
Vite（法語(yǔ)意為 "快速的"，發(fā)音 /vit/，發(fā)音同 "veet") 是一種新型前端構(gòu)建工具，能夠顯著提升前端開(kāi)發(fā)體驗(yàn)。
優(yōu)勢(shì)
-
?? 極速的服務(wù)啟動(dòng)，使用原生 ESM 文件，無(wú)需打包
-
?? 輕量快速的熱重載，始終極快的模塊熱重載（HMR）
-
??? 豐富的功能，對(duì) TypeScript、JSX、CSS 等支持開(kāi)箱即用
-
?? 等等
為什么選Vite？
傳統(tǒng)方式（webpack）
-
必須將應(yīng)用中所有模塊都打包后，然后才能提供服務(wù)并訪問(wèn)。
-
更新速度會(huì)隨著應(yīng)用體積增長(zhǎng)而直線(xiàn)下降。
vite 方式
-
Vite 只在瀏覽器用到某個(gè)模塊時(shí)，才會(huì)將該模塊打包。
-
Vite 以 原生 ESM 方式提供源碼。這實(shí)際上是讓瀏覽器接管了打包的部分工作。
?
?Vite的基本使用
目標(biāo)：能夠使用 vite 創(chuàng)建一個(gè) vue3 的項(xiàng)目
使用 vite 創(chuàng)建項(xiàng)目
npm create vite
# or
yarn create vite
# or
pnpm create vite
vite 快捷命令
如果想要快速創(chuàng)建一個(gè) vue3 項(xiàng)目，可以使用如下命令
-
創(chuàng)建普通 vue3 項(xiàng)目
yarn create vite vite-demo --template vue創(chuàng)建基于 ts 模板的 vue3 項(xiàng)目
yarn create vite vite-demo-ts --template vue-tsvscode 插件說(shuō)明
-
vue2 中需要安裝插件
vetur，可以實(shí)現(xiàn)組件高亮。但是 vue3 的一些語(yǔ)法在 vetur 中報(bào)錯(cuò)。 -
vue3 中需要安裝插件
Vue Language Features (Volar)，提供了更加強(qiáng)大的功能。
?
了解 vue3 項(xiàng)目
-
刪除 src 下所有的文件和代碼
-
創(chuàng)建 App.vue
<template>
<div>我是 App 組件</div>
</template>創(chuàng)建 main.js 文件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-432749.html
// 1. 引入 createApp 方法
import { createApp } from 'vue'
// 2. 引入根組件
import App from './App.vue'
// 3. 創(chuàng)建應(yīng)用實(shí)例，并傳入 App 根組件
const app = createApp(App)
// 4.將根組件掛載到頁(yè)面指定的區(qū)域
app.mount('#app')index.html文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-432749.html
<div id="app"></div>
<script type="module" src="/src/main.js"></script>到了這里，關(guān)于Vue3基本知識(shí)點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
