如何在本地和 CDN 上安裝 Vue 3

發布於 2024/06/03 更新於 2024/11/12

作者 Ned Hsu 3 分鐘閱讀

如何在本地和 CDN 上安裝 Vue 3

1. 在本地安裝 Vue 3

在本地安裝 Vue 3 通常適合構建更大規模的應用程序或需要使用構建工具（如 Webpack 或 Vite）進行開發的情況。以下是使用 npm 安裝 Vue 3 的步驟：

步驟：

創建一個新的項目目錄：
1 2 mkdir my-vue-app cd my-vue-app
初始化 npm 項目：在目錄中運行以下命令來初始化一個新的 npm 項目：
1 npm init -y
安裝 Vue 3：使用 npm 或 yarn 安裝 Vue 3：
1 npm install vue@next
或者使用 Yarn：
1 yarn add vue@next
建立項目結構：在項目目錄下，創建一個簡單的 HTML 文件（如 index.html），並創建一個 JavaScript 文件（如 main.js）來初始化 Vue 應用程序。

編寫代碼：在 index.html 中：

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue 3 App</title>
</head>
<body>
    <div id="app"></div>
    <script src="node_modules/vue/dist/vue.global.js"></script>
    <script src="main.js"></script>
</body>
</html>

在 main.js 中：

  
const { createApp } = Vue;

createApp({
    data() {
        return {
            message: 'Hello Vue 3!'
        }
    }
}).mount('#app');

這樣就可以在本地運行和開發 Vue 3 應用程序。

2. 通過 CDN 安裝 Vue 3

如果你想快速搭建一個 Vue 3 項目，或者只是想要進行簡單的測試，可以使用 CDN 方式在 HTML 頁面上直接引入 Vue 3。

步驟：

創建一個 HTML 文件（如 index.html）並在 <head> 或 <body> 部分中添加以下 <script> 標籤：

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue 3 App via CDN</title>
    <!-- 引入 Vue 3 via CDN -->
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    message: 'Hello Vue 3 from CDN!'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

保存並打開 HTML 文件：打開你的瀏覽器，並加載這個 HTML 文件。你應該會看到頁面上顯示了 “Hello Vue 3 from CDN!”。

3. 總結

本地安裝：適合需要進行更複雜開發的項目。需要使用包管理器（如 npm 或 yarn）安裝 Vue 3。
CDN 安裝：適合快速原型設計或簡單的測試環境。只需在 HTML 文件中引入 Vue 3 的 CDN 版本。

這兩種方法各有優勢，你可以根據實際需求選擇合適的安裝方式。

Software, Vue3

本文章以 CC BY 4.0 授權

如何在本地和 CDN 上安裝 Vue 3

1. 在本地安裝 Vue 3

步驟：

2. 通過 CDN 安裝 Vue 3

步驟：

3. 總結

熱門標籤