前言 以往零零散散使用過一些Vue的語法，最近才剛剛系統接觸Vue，現在是剛剛入門的狀態，故在這裡做一個記錄和梳理，歡迎大家一起學習交流，有錯誤的地方也歡迎大家指正。 正篇 夢開始的地方 在寫之前我想先在這裡貼出Vue的一個官方的（應該是）學習教學https://cn.vuejs.org/guide ...
前言
以往零零散散使用過一些Vue的語法，最近才剛剛系統接觸Vue，現在是剛剛入門的狀態，故在這裡做一個記錄和梳理，歡迎大家一起學習交流，有錯誤的地方也歡迎大家指正。
正篇
夢開始的地方
在寫之前我想先在這裡貼出Vue的一個官方的（應該是）學習教學https://cn.vuejs.org/guide/introduction.html
本文里我也會遵循這個步驟來整理，我會儘量寫的區別於鏈接中的文檔，也會提出一些自己的想法，歡迎看到的朋友們提出不同意見。
Vue的引入
Vue的引入分為兩種，一種是再本地安裝Vue，一種是使用CDN的形式引入，這裡我更加熟悉的是通過CDN使用Vue的方式，但是使用CDN引入將無法使用單文件組件的語法（SFC），而我看到有朋友說SFC在大型開發中用的其實是比較多的。所以這裡我從頭到尾用在本地搭建的方式進行一次。
本地創建一個Vue應用
首先安裝一個NodeJS，這是一個搭載V8內核的JavaScript運行環境，不依賴瀏覽器即可運行JavaScript代碼。這裡我編輯器採用VS Code並安裝了Volar擴展。
在終端中輸入
> npm init vue@latest
這個指令用於安裝create-vue，這是一個CLI，用於Vue的安裝，這裡會看到一些可選功能，如果沒有需要或是不瞭解，可以先選擇No（畢竟到了需要的時候還能再裝）。
在項目被創建後，可以通過
> cd "你的項目"
> npm install
> npm run dev
這時已經可以運行一個Vue項目了
當你準備把應用發佈到生產環境（投入應用）時，運行
> npm run build
通過CDN使用Vue
這是一種很方便的Vue使用方法，和很多JavaScript組件的引用方式相同，直接在代碼中引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
這樣使用了全局構建版本的Vue，所有的頂層API都會在Vue對象中。這裡給出一個例子：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
此外，利用CDN引入還可以考慮ES模塊的方法：
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
此外還有使用Import maps的方法，這個方法與上面代碼類似，感覺寫的要麻煩一點，這裡就先不提了。
