如何建立第一個 Vue 應用

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

作者 Ned Hsu 4 分鐘閱讀

如何建立第一個 Vue 應用

這裡將介紹如何快速建立一個 Vue 3 應用程序，包括通過 CDN 和使用 Vue CLI 兩種方式。

方法一：使用 CDN 建立一個簡單的 Vue 應用

這種方法非常適合快速原型設計或簡單的測試環境。只需在 HTML 文件中引入 Vue 3 的 CDN 版本，即可開始使用。

步驟：

創建一個 HTML 文件（如 index.html），並在 <head> 或 <body> 部分中添加 Vue 3 的 CDN 連結。

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Vue App</title>
    <!-- 引入 Vue 3 via CDN -->
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
</head>
<body>
    <!-- Vue 應用的根元素 -->
    <div id="app">
        <h1></h1>
        <button @click="handleClick">Click Me</button>
    </div>

    <script>
        // 使用 Vue 3 創建應用
        const { createApp } = Vue;

        // 創建 Vue 應用實例
        createApp({
            data() {
                return {
                    message: 'Hello, Vue 3!'
                };
            },
            methods: {
                handleClick() {
                    alert('Button clicked!');
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

保存並打開 HTML 文件：
使用你的瀏覽器打開這個 HTML 文件。你應該能夠看到頁面顯示 “Hello, Vue 3!”，並且點擊按鈕會觸發彈窗。

這種方法適合快速測試和構建小型應用。無需構建工具或額外的依賴配置。

方法二：使用 Vue CLI 建立一個 Vue 應用

Vue CLI 是一個官方的命令行工具，提供了更強大和靈活的開發環境。這種方法適合於構建更複雜和大規模的應用。

步驟：

安裝 Node.js 和 npm：
如果你還沒有安裝 Node.js，請先前往 Node.js 官網下載並安裝。Node.js 的安裝包會自動包含 npm。
安裝 Vue CLI：
使用 npm 安裝 Vue CLI。打開你的終端或命令提示符，然後輸入以下命令：
1 npm install -g @vue/cli
確保安裝完成後，可以使用以下命令來確認 Vue CLI 是否安裝成功：
1 vue --version
如果返回版本號，則說明安裝成功。
創建一個新的 Vue 項目：
使用 Vue CLI 創建一個新項目，命名為 my-vue-app（或任何你想要的名稱）：
1 vue create my-vue-app
Vue CLI 會提示你選擇一些預設配置。你可以選擇默認配置（使用箭頭鍵選擇，按回車鍵確認），或者手動選擇你需要的功能（如 TypeScript、Router、Vuex 等）。
進入項目目錄並啟動開發伺服器：
進入項目目錄並啟動開發伺服器：
1 2 cd my-vue-app npm run serve
這將會啟動一個開發伺服器，並在終端中顯示類似以下的輸出：
1 2 3 App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.2:8080/
打開瀏覽器並訪問本地開發伺服器：
打開你的瀏覽器，訪問 http://localhost:8080/。你應該能夠看到一個 Vue.js 的歡迎頁面，這表明你的 Vue 應用已經成功運行。

總結

使用 CDN：快速開始，適合簡單的應用或測試環境。
使用 Vue CLI：適合構建和開發更複雜的應用，提供了豐富的開發工具和擴展選項。

根據你的需求選擇適合的方式來建立你的第一個 Vue 應用吧！

Software, Vue3

本文章以 CC BY 4.0 授權

如何建立第一個 Vue 應用

方法一：使用 CDN 建立一個簡單的 Vue 應用

步驟：

方法二：使用 Vue CLI 建立一個 Vue 應用

步驟：

總結

熱門標籤