就在17號4 點左右，vue-next v3.0.0-beta.1 版本釋出，這意味著 Vue 3.0 全家桶正式登場，釋出內容包括：

vue: Betavue-router: Alphavuex: Alphavue-class-component: Alphavue-cli: Experimental support via vue-cli-plugin-vue-nexteslint-plugin-vue: Alphavue-test-utils: Alphavue-devtools: WIPjsx: 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 3.0 專案初始化過程和 Vue 2.0 類似，具體步驟如下：

Vue 專案初始化

第一步，安裝 vue-cli：

npm install -g @vue/cli

第二步，初始化 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 /file/2020/04/19/20200419121234_154981.jpg.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>

啟動專案：

在瀏覽器中訪問專案地址，此時已經可以跳轉到 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 的值