今天要來探索直接在網頁上使用Vue的方法
首先同樣參考Vue官網上 Quick Start 上的說明
https://vuejs.org/guide/quick-start.html
稱之為 Using Vue from CDN
在網頁中加上以下script，就可以載入Vue的套件
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
這裡有提到CDN 就是 Content Delivery Network的縮寫，也就是「內容傳遞網路」
也就是提供js套件的傳遞網路，目前常用的有 unpkg, jsdelivr, cdnjs
像是上面的vue.js的套件就是從unpkg CDN載入的
以下列出這3個CDN的網址
https://unpkg.com/
在unpkg的官網上，寫到
unpkg is a fast, global content delivery network for everything on npm.
這又出現npm, 可以想見很多透過npm下載的js套件，其CDN就在unpkg
這個是下載套件的 網址格式
unpkg.com/:package@:version/:file
unpkg.com/vue@3/dist/vue.global.js
https://www.jsdelivr.com/
這是jsdelivr官網的介紹
A free CDN for open source projects
Optimized for JS and ESM delivery from npm and GitHub.
以下是透過 jsdelivr 載入的vue.js套件
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
https://cdnjs.com/
這是cdnjs官網的介紹
cdnjs is a free and open-source CDN service
以下是透過 cdnjs 載入的vue.js套件
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.min.js"></script>
//------------------------
透過在網頁上載入vue.js套件，就可以當作是一般網頁直接在瀏覽器中開啟，而不用經過build的過程
以下示範語法格式
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
const { createApp, ref } = Vue 是指從vue.js套件中
提取 createApp, ref 的功能函式來使用
程式的進入點，從 createApp 的 setup() 開始
接著const message = ref('Hello vue!')
是指透過 ref() 讓變數 message 與 網頁中 的 {{ message }} 連動起來
ref('Hello vue!') 是指初始值是 'Hello vue!' 其設定給message, 然後再反應給{{ message }}
如此只要在程式中 message 的數值被改變了，就會即時反應在 網頁<div>上了
以下還有另外不同的寫法
這是使用ES Module語法的寫法
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
ES Module 就是將js程式碼模組化的概念，像是import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
是指 從vue.esm-browser.js套件或模組，引入 createApp, ref 的功能
模組化是很重要的概念，將程式碼打包成模組後，可以匯出及匯入
這部份會再另一篇中來研究
以下是使用CDN的完整的 HTML 的程式碼
index_vue_cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Using Vue from CDN</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>
以下是使用 ES Module 的完整的 HTML 的程式碼
index_vue_es.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using the ES Module Build</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>
另一種寫法
index_vue_es.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using the ES Module Build</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp, ref } from 'vue'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>
另一種分離成ES元件的寫法
index_vue_es1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Splitting Up the Modules</title>
</head>
<body>
<div id="app"></div>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
import MyComponent from './index_vue_es1.js'
createApp(MyComponent).mount('#app')
</script>
</body>
</html>
index_vue_es1.js
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `<div>Count is {{ count }}</div>`
}
整理一下
CDN<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
ES Module -> Type1
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>
ES Module -> Type2
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
iThome鐵人賽
看影片追技術