vue3.0 Composition API 上手初體驗 構建 vue 基礎代碼

vue3.0 Composition API 上手初體驗 構建 vue 基礎代碼

上一講中，我們通過配置 webpack 構建了一個基礎的開發環境。但是並沒有涉及到 vue3.0 的內容，這一講中，我們來構建一些基礎代碼。

首先，在終端中進入到我們的項目目錄，我的 demo 目錄爲 ~/Sites/myWork/demo/vue3-demo。

本人爲 MacOS 環境， Windows 環境請自行將一些命令轉換成你習慣的操作。比如在文件夾中操作，或在 vscode 等編輯器中操作。

創建基礎文件

# 進入項目文件夾
cd ~/Sites/myWork/demo/vue3-demo
# 創建 App.vue 文件
touch src/App.vue

重寫 src/main.js 文件

在上一講中，我們直接寫了個測試代碼就完了，這裏我們將文件內容替換爲以下內容：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

注意，這裏的寫法已經和 2.0 的寫法完全不一致了。 2.0 的時候採用的是創建一個新對象的方式，而這裏採用的是函數方式。

這裏我不做過多解釋，如果想追究原理，可以去查看源碼，或等待官方更新文檔。

編寫 src/App.js 文件

<template>
  <div>這是一個 vue 3.0 的 demo</div>
</template>

然後我們運行 npm run dev 將項目跑起來。

小結

這一講內容比較少，着重點是 main.js 中的寫法變化。

下一講，我們來引入 vue-router。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

---

《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！

文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！