序

Vue 3.0 全家桶發布內容包括：

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 版本是一個項目系列，包含了我們在開發過程中需要的套件、webpack 插件等等，本文將帶大家快速搭建基于 Vue 3.0 的項目框架，這和之前很多 Vue 3.0 的 Demo 不同，是具備商業化項目能力的框架，本文將包括以下內容：

基于 vue-cli 快速搭建 Vue 3.0 項目 Vue 3.0 基本特性體驗 集成 vue-router 和 vuex 4.0

說個題外話，今天中午我搭建 Vue 3.0 項目時，發現了 vue-router-next 一個 block 級別的 BUG，想在 vue-router-next 項目 issue 中反饋時，發現已經有人提交了相似問題，隨后晚上測試時，bug 已經被 fixed，為 Vue 團隊的高效點贊，issue 地址，所以當大家發現使用中問題時，可以及時到項目 issue 下進行反饋，這是一支可以信賴的團隊！

Vue 3.0 項目初始化

Vue 3.0 項目初始化過程和 Vue 2.0 類似，具體步驟如下：

Vue 項目初始化

第一步，安裝 vue-cli：

npm install -g @vue/cli

注意以下命令是錯誤的！

npm install -g vuenpm install -g vue-cli

安裝成功后，我們即可使用 vue 命令，測試方法：

$ vue -V@vue/cli 4.3.1

第二步，初始化 vue 項目：

vue create vue-next-test

輸入命令后，會出現命令行交互窗口，這里我們選擇 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，這些都是開發商業級項目必須的：

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 項目創建過程中勾選 Router 和 Vuex，所以避免手動寫初始化代碼

回車后會自動安裝依賴，為了加速安裝速度，我們可以使用淘寶源來加快初始化速度：

vue create -r https://registry.npm.taobao.org vue-next-test

項目創建完畢后，目錄結構如下：

.├── 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 項目

目前創建 Vue 3.0 項目需要通過插件升級的方式來實現，vue-cli 還沒有直接支持，我們進入項目目錄，并輸入以下指令：

cd vue-next-testvue add vue-next

執行上述指令后，會自動安裝 vue-cli-plugin-vue-next 插件（查看項目代碼），該插件會完成以下操作：

安裝 Vue 3.0 依賴 更新 Vue 3.0 webpack loader 配置，使其能夠支持 .vue 文件構建（這點非常重要） 創建 Vue 3.0 的模板代碼 自動將代碼中的 Vue Router 和 Vuex 升級到 4.0 版本，如果未安裝則不會升級 自動生成 Vue Router 和 Vuex 模板代碼

完成上述操作后，項目正式升級到 Vue 3.0，注意該插件還能支持 typescript，用 typescript 的同學還得再等等。

Vue 3.0 基本特性體驗

下面我們從項目開發的角度逐步體驗 Vue 3.0 的開發流程

創建路由

項目開發中，我們通常需要創建新頁面，然后添加路由配置，我們在 /src/views 目錄下創建 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 中創建路由配置：

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 版本變化不大，只是之前采用構造函數的方式，這里改為使用 createRouter 來創建 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

在瀏覽器中訪問項目地址，此時已經可以跳轉到 Test 頁面：

狀態和事件綁定

Vue 3.0 中定義狀態的方法改為類似 React Hooks 的方法，下面我們在 Test.vue 中定義一個狀態 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 中初始化狀態通過 setup 方法，定義狀態需要調用 ref 方法。接下來我們定義一個事件，用來更新 count 狀態：

<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 的值就會更新了：

計算屬性和監聽器

Vue 3.0 中計算屬性和監聽器的實現依賴 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 是一個方法，里面需要包含一個回調函數，當我們訪問計算屬性返回結果時，會自動獲取回調函數的值：

const doubleCount = computed(() => count.value * 2)

監聽器 watch 同樣是一個方法，它包含 2 個參數，2 個參數都是 function：

watch(() => count.value, val => { console.log(`count is ${val}`) })

第一個參數是監聽的值，count.value 表示當 count.value 發生變化就會觸發監聽器的回調函數，即第二個參數，第二個參數可以執行監聽時候的回調

獲取路由

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 狀態

第一步，修改 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 中創建了一個 test.a 狀態，在 mutations 中添加了修改 state.test.a 狀態的方法： setTestA

引用 Vuex 狀態

第二步，在 Test.vue 中，通過計算屬性使用 Vuex 狀態：

<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 中的狀態：

const a = computed(() => ctx.$store.state.test.a)

ctx 是上節中我們提到的當前組件實例

更新 Vuex 狀態

更新 Vuex 狀態仍然使用 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 按鈕后，會觸發 update 方法，此時會通過 ctx.$store.commit 調用 setTestA 方法，將 count 的值覆蓋 state.test.a 的值

總結

通過我第一時間體驗 Vue 3.0-beta 版本后，感覺 Vue 3.0 已經具備了商業項目開發的必備條件，語法精煉，不管是代碼可讀性還是運行效率都非常贊。但由于未深入使用，目前還無法提出更多問題，需要在項目實戰中進一步發現和總結問題，再和大家分享交流。

到此這篇關于Vue 3.0 全家桶搶先體驗的文章就介紹到這了,更多相關Vue 3.0 全家桶內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！