Vue3實戰系列：結合 Ant-Design-of-Vue 實踐 Composition API
阿新 • • 發佈：2020-10-12
`Vue 3` 出來之後，很多人有如下想法，“又要學新東西啦”、“我學不動了”等等。
但是事物總有它的兩面性，前端知識更新的很快，利好勤奮好學的同學。計算機行業的迭代速度很快，前端在計算機領域裡，算是前浪被拍在沙灘上比較快的。
我很羨慕還在學校的同學，因為現在的大學生，資訊的獲取量比我當年在大學的時候大得多，我希望你們能珍惜這樣的機會，好好的學習新知識，希望你們進入社會不要被毒打。
學習一門新的技術，我認為最好的方式就是通過 Demo 去製造使用場景，通覽一遍 API，需要做到什麼程度呢？
大概就是什麼場景用什麼 API 都能瞭如於心，再大白話一點就是可以將之前用 `Vue2.x` 寫的程式碼，用 `Vue 3` 無差別重構一遍。
## 構建 Vue3.0 的三種方式
就目前而言，構建 `Vue 3` 的專案有三種方式。
#### **1、命令列工具 (CLI)**
對於 `Vue 3`，你應該使用 `npm` 上可用的 Vue CLI v4.5 作為 `@vue/cli@next`。要升級，你應該需要全域性重新安裝最新版本的 `@vue/cli`：
```bash
yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next
```
#### **2、Vite**
`Vite` 是一個 web 開發構建工具，由於其原生 ES 模組匯入方法，它允許快速提供程式碼。
通過在終端中執行以下命令，可以使用 Vite 快速設定 Vue 專案。
使用 npm：
```bash
npm init vite-app
cd
npm install
npm run dev
```
#### **3、Webpack**
很早的時候，Vue-CLI 還沒支援 `Vue 3` 專案的建立，Vue 團隊製作了一個 Webpack 的專案配置放在 [Github](https://github.com/vuejs/vue-next-webpack-preview)，可以直接克隆下來使用。
```bash
git clone https://github.com/vuejs/vue-next-webpack-preview.git demov3
cd demov3
npm install
npm run dev
```
> 不推薦使用這種方式，現在都有上面兩種了～～
（以前看星星看月亮的時候叫人家“小甜甜”，現在新人勝舊人，叫人家“牛夫人”）
## 程式碼實踐
我們選擇比較新鮮的 Vite 去構建專案，要玩就玩最潮的。我的本地 Node 版本是 `v12.6.0`，儘量保持一致。
#### **構建專案**
```bash
npm init vite-app todo-v3
cd todo-v3
npm install // 建議使用淘寶映象 cnpm install
npm run dev
```
啟動之後如下所示，代表成功了：
#### **入口頁面**
首先映入眼簾的是 `main.js` 的變化：
```javascript
// Vue 3.0
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
```
```javascript
// Vue 2.x
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
```
第一段程式碼是 `Vue 3` 的建立 Vue 例項形式，通過 `createApp` 的形式，你別說，和 `React` 真的挺像的