Vue 3.0 全家桶搶先體驗
序
Vue 3.0 全家桶發(fā)布內(nèi)容包括:
- vue: Beta
- vue-router: Alpha
- vuex: Alpha
- vue-class-component: Alpha
- vue-cli: Experimental support via vue-cli-plugin-vue-next
- eslint-plugin-vue: Alpha
- vue-test-utils: Alpha
- vue-devtools: WIP
- jsx: WIP
可以看到 Vue 3.0 beta 版本是一個項目系列,包含了我們在開發(fā)過程中需要的套件、webpack 插件等等,本文將帶大家快速搭建基于 Vue 3.0 的項目框架,這和之前很多 Vue 3.0 的 Demo 不同,是具備商業(yè)化項目能力的框架,本文將包括以下內(nèi)容:
- 基于 vue-cli 快速搭建 Vue 3.0 項目
- Vue 3.0 基本特性體驗
- 集成 vue-router 和 vuex 4.0
說個題外話,今天中午我搭建 Vue 3.0 項目時,發(fā)現(xiàn)了 vue-router-next 一個 block 級別的 BUG,想在 vue-router-next 項目 issue 中反饋時,發(fā)現(xiàn)已經(jīng)有人提交了相似問題,隨后晚上測試時,bug 已經(jīng)被 fixed,為 Vue 團隊的高效點贊,issue 地址,所以當大家發(fā)現(xiàn)使用中問題時,可以及時到項目 issue 下進行反饋,這是一支可以信賴的團隊!
Vue 3.0 項目初始化
Vue 3.0 項目初始化過程和 Vue 2.0 類似,具體步驟如下:
Vue 項目初始化
第一步,安裝 vue-cli:
npm install -g @vue/cli
注意以下命令是錯誤的!
npm install -g vue npm install -g vue-cli
安裝成功后,我們即可使用 vue 命令,測試方法:
$ vue -V @vue/cli 4.3.1
第二步,初始化 vue 項目:
vue create vue-next-test
輸入命令后,會出現(xiàn)命令行交互窗口,這里我們選擇 Manually select features:
Vue CLI v4.3.1 ? Please pick a preset: default (babel, eslint) ❯ Manually select features
隨后我們勾選:Router、Vuex、CSS Pre-processors 和 Linter / Formatter,這些都是開發(fā)商業(yè)級項目必須的:
Vue CLI v4.3.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ❯◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing
注意:Vue 3.0 項目目前需要從 Vue 2.0 項目升級而來,所以為了直接升級到 Vue 3.0 全家桶,我們需要在 Vue 項目創(chuàng)建過程中勾選 Router 和 Vuex,所以避免手動寫初始化代碼
回車后會自動安裝依賴,為了加速安裝速度,我們可以使用淘寶源來加快初始化速度:
vue create -r https://registry.npm.taobao.org vue-next-test
項目創(chuàng)建完畢后,目錄結(jié)構(gòu)如下:
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
├── store
│ └── index.js
└── views
├── About.vue
└── Home.vue
升級 Vue 3.0 項目
目前創(chuàng)建 Vue 3.0 項目需要通過插件升級的方式來實現(xiàn),vue-cli 還沒有直接支持,我們進入項目目錄,并輸入以下指令:
cd vue-next-test vue add vue-next
執(zhí)行上述指令后,會自動安裝 vue-cli-plugin-vue-next 插件(查看項目代碼),該插件會完成以下操作:
- 安裝 Vue 3.0 依賴
- 更新 Vue 3.0 webpack loader 配置,使其能夠支持 .vue 文件構(gòu)建(這點非常重要)
- 創(chuàng)建 Vue 3.0 的模板代碼
- 自動將代碼中的 Vue Router 和 Vuex 升級到 4.0 版本,如果未安裝則不會升級
- 自動生成 Vue Router 和 Vuex 模板代碼
完成上述操作后,項目正式升級到 Vue 3.0,注意該插件還能支持 typescript,用 typescript 的同學還得再等等。
Vue 3.0 基本特性體驗
下面我們從項目開發(fā)的角度逐步體驗 Vue 3.0 的開發(fā)流程
創(chuàng)建路由
項目開發(fā)中,我們通常需要創(chuàng)建新頁面,然后添加路由配置,我們在 /src/views 目錄下創(chuàng)建 Test.vue:
<template>
<div class="test">
<h1>test page</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.test {
color: red;
}
</style>
之后在 /src/router/index.js 中創(chuàng)建路由配置:
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
初始化 Vue Router 的過程與 3.0 版本變化不大,只是之前采用構(gòu)造函數(shù)的方式,這里改為使用 createRouter 來創(chuàng)建 Vue Router 實例,配置的方法基本一致,配置完成后我們還需要在 App.vue 中增加鏈接到 Test.vue 的路由:
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/test">Test</router-link> </div> <router-view/> </div> </template>
啟動項目:
npm run serve
在瀏覽器中訪問項目地址,此時已經(jīng)可以跳轉(zhuǎn)到 Test 頁面:

狀態(tài)和事件綁定
Vue 3.0 中定義狀態(tài)的方法改為類似 React Hooks 的方法,下面我們在 Test.vue 中定義一個狀態(tài) count:
<template>
<div class="test">
<h1>test count: {{count}}</h1>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
return {
count
}
}
}
</script>
Vue 3.0 中初始化狀態(tài)通過 setup 方法,定義狀態(tài)需要調(diào)用 ref 方法。接下來我們定義一個事件,用來更新 count 狀態(tài):
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
return {
count,
add
}
}
}
</script>
這里的 add 方法不再需要定義在 methods 中,但注意更新 count 值的時候不能直接使用 count++,而應使用 count.value++,更新代碼后,點擊按鈕,count 的值就會更新了:

計算屬性和監(jiān)聽器
Vue 3.0 中計算屬性和監(jiān)聽器的實現(xiàn)依賴 computed 和 watch 方法:
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
return {
count,
doubleCount,
add
}
}
}
</script>
計算屬性 computed 是一個方法,里面需要包含一個回調(diào)函數(shù),當我們訪問計算屬性返回結(jié)果時,會自動獲取回調(diào)函數(shù)的值:
const doubleCount = computed(() => count.value * 2)
監(jiān)聽器 watch 同樣是一個方法,它包含 2 個參數(shù),2 個參數(shù)都是 function:
watch(() => count.value,
val => {
console.log(`count is ${val}`)
})
第一個參數(shù)是監(jiān)聽的值,count.value 表示當 count.value 發(fā)生變化就會觸發(fā)監(jiān)聽器的回調(diào)函數(shù),即第二個參數(shù),第二個參數(shù)可以執(zhí)行監(jiān)聽時候的回調(diào)
獲取路由
Vue 3.0 中通過 getCurrentInstance 方法獲取當前組件的實例,然后通過 ctx 屬性獲得當前上下文,ctx.$router 是 Vue Router 實例,里面包含了 currentRoute 可以獲取到當前的路由信息
<script>
import { getCurrentInstance } from 'vue'
export default {
setup () {
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
}
}
</script>
Vuex 集成
Vuex 的集成方法如下:
定義 Vuex 狀態(tài)
第一步,修改 src/store/index.js 文件:
import Vuex from 'vuex'
export default Vuex.createStore({
state: {
test: {
a: 1
}
},
mutations: {
setTestA(state, value) {
state.test.a = value
}
},
actions: {
},
modules: {
}
})
Vuex 的語法和 API 基本沒有改變,我們在 state 中創(chuàng)建了一個 test.a 狀態(tài),在 mutations 中添加了修改 state.test.a 狀態(tài)的方法: setTestA
引用 Vuex 狀態(tài)
第二步,在 Test.vue 中,通過計算屬性使用 Vuex 狀態(tài):
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
return {
count,
doubleCount,
add,
a
}
}
}
</script>
這里我們通過計算屬性來引用 Vuex 中的狀態(tài):
const a = computed(() => ctx.$store.state.test.a)
ctx 是上節(jié)中我們提到的當前組件實例
更新 Vuex 狀態(tài)
更新 Vuex 狀態(tài)仍然使用 commit 方法,這點和 Vuex 3.0 版本一致:
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
<button @click="update">update a</button>
</div>
</template>
<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
const update = () => {
ctx.$store.commit('setTestA', count)
}
return {
count,
doubleCount,
add,
a,
update
}
}
}
</script>
這里我們點擊 update a 按鈕后,會觸發(fā) update 方法,此時會通過 ctx.$store.commit 調(diào)用 setTestA 方法,將 count 的值覆蓋 state.test.a 的值
總結(jié)
通過我第一時間體驗 Vue 3.0-beta 版本后,感覺 Vue 3.0 已經(jīng)具備了商業(yè)項目開發(fā)的必備條件,語法精煉,不管是代碼可讀性還是運行效率都非常贊。但由于未深入使用,目前還無法提出更多問題,需要在項目實戰(zhàn)中進一步發(fā)現(xiàn)和總結(jié)問題,再和大家分享交流。
到此這篇關(guān)于Vue 3.0 全家桶搶先體驗的文章就介紹到這了,更多相關(guān)Vue 3.0 全家桶內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用provide/inject實現(xiàn)跨組件通信的方法
在 Vue 應用中,組件間通信是構(gòu)建復雜應用時的一個常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實現(xiàn)跨組件通信,并通過示例代碼一步步進行說明,需要的朋友可以參考下2024-03-03
淺談vue中使用編輯器vue-quill-editor踩過的坑
這篇文章主要介紹了淺談vue中使用編輯器vue-quill-editor踩過的坑,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
使用Vue3實現(xiàn)交互式雷達圖的代碼實現(xiàn)
雷達圖是一種可視化數(shù)據(jù)的方式,用于比較多個類別中不同指標的相對值,它適用于需要展示多個指標之間的關(guān)系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達圖,需要的朋友可以參考下2024-06-06

