前言
以往零零散散使用過一些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的方法，這個方法與上面代碼類似，感覺寫的要麻煩一點，這里就先不提了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544496.html
標籤：其他