「Vue3系列」Vue3起步/創建項目

文章目錄

一、Vue3 創建項目
二、Vue3 Create詳解
- 命令格式
- 可選選項
- 使用示例
- 注意事項
三、Vue3 項目目錄結構
四、Vue3 起步實例
五、相關鏈接

一、Vue3 創建項目

在 Vue 3 中創建項目，通常使用 Vue CLI（命令行工具）來簡化項目的初始化過程。Vue CLI 是一個強大的工具，它可以幫助你快速搭建 Vue.js 項目，并且內置了對 Vue Router、Vuex、CSS 預處理器、PWA 支持、單元測試等的集成。

以下是使用 Vue CLI 創建 Vue 3 項目的步驟：

安裝 Node.js 和 npm/yarn

確保你的計算機上安裝了最新版本的 Node.js 和 npm（Node.js 的包管理器）。npm 會隨同 Node.js 一起安裝。你也可以選擇安裝 yarn，它是一個流行的替代包管理器。

安裝 Vue CLI

在安裝了 Node.js 和 npm/yarn 之后，你需要全局安裝 Vue CLI。打開終端或命令提示符，然后運行以下命令之一來安裝 Vue CLI：

使用 npm：

npm install -g @vue/cli
npm install -g @vue/cli@next # 如果要安裝最新版本的 Vue CLI（包括 Vue 3 支持）

使用 yarn：

yarn global add @vue/cli
yarn global add @vue/cli@next # 如果要安裝最新版本的 Vue CLI（包括 Vue 3 支持）

安裝完成后，你可以通過運行 vue --version 來驗證 Vue CLI 是否正確安裝。

創建 Vue3 項目

使用 Vue CLI，你可以通過以下命令創建一個新的 Vue3 項目。請將 my-vue3-project 替換為你想要的項目名稱：

vue create my-vue3-project

這個命令會啟動一個交互式的命令行界面，詢問你一些問題以定制項目的配置。你可以選擇默認配置（Default）來快速創建一個項目，或者手動選擇特性（Manually select features）來定制你的項目。在配置選項中，確保選擇了 Vue 3 作為項目的版本。

此外，Vue CLI 還提供了一個快捷方式來直接創建 Vue 3 項目，使用 -- --next 標志：

vue create my-vue3-project -- --next

這個命令將直接為你創建一個使用 Vue 3 的項目。

創建項目后，你需要進入項目的目錄以開始開發。使用以下命令切換到你的項目目錄：

cd my-vue3-project

運行項目

在項目目錄中，你可以使用以下命令之一來啟動開發服務器：

使用 npm：

npm run serve

使用 yarn：

yarn serve

這將啟動一個本地開發服務器，并在瀏覽器中自動打開一個新的標簽頁，顯示你的 Vue3 應用。默認情況下，應用將在 http://localhost:8080 上運行。

開發你的應用

現在你可以開始開發你的 Vue3 應用了。在 src 目錄下，你會找到主要的項目文件，如 App.vue（應用的根組件）和 main.js（應用的入口文件）。你可以根據需要編輯這些文件和其他文件來構建你的應用。

構建生產版本

當你的應用開發完成并準備部署到生產環境時，你可以使用以下命令之一來構建項目的生產版本：

使用 npm：

npm run build

使用 yarn：

yarn build

這將創建一個優化過的、用于生產環境的版本在你的項目目錄下的 dist 文件夾中。

部署應用

構建完成后，你可以將 dist 文件夾中的內容部署到你的 Web 服務器或靜態文件托管服務上，以便讓其他人能夠訪問你的 Vue3 應用。

二、Vue3 Create詳解

vue create 命令是 Vue CLI 中的一個重要命令，用于創建新的 Vue.js 項目。這個命令提供了豐富的配置選項，允許開發者根據項目需求定制項目結構和依賴項。以下是 vue create 命令的詳細解釋和一些常用的選項：

命令格式

vue create <project-name>

其中 <project-name> 是你想要創建的新項目的名稱。

可選選項

-p 或 --preset <presetName>：忽略提示符并使用已保存或遠程的預設選項。預設是一組預定義的配置選項，可以用來快速創建具有特定功能的項目。
-d 或 --default：忽略提示符并使用默認預設選項。這將使用 Vue CLI 的默認配置來創建項目。
-i 或 --inlinePreset <json>：忽略提示符并使用內聯的 JSON 字符串預設選項。你可以直接提供一個 JSON 字符串來定義項目的配置。
-m 或 --packageManager <command>：在安裝依賴時使用指定的 npm 客戶端。例如，你可以使用 yarn 代替 npm。
-r 或 --registry <url>：在安裝依賴時使用指定的 npm registry。這允許你使用私有 registry 或鏡像源。
-g 或 --git [message]：強制或跳過 git 初始化，并可選地指定初始化提交信息。
-n 或 --no-git：跳過 git 初始化。
-f 或 --force：覆寫目標目錄可能存在的配置。
-c 或 --clone：使用 git clone 獲取遠程預設選項。
-x 或 --proxy：使用指定的代理創建項目。
-b 或 --bare：創建項目時省略默認組件中的新手指導信息。
-h 或 --help：輸出使用幫助信息。

使用示例

使用默認配置創建項目：

vue create my-project

這將啟動一個交互式的命令行界面，詢問你一些問題來定制項目配置。

使用預設創建項目：

如果你有一個預定義的預設文件（例如 my-preset.json），你可以使用 -i 選項來直接應用它：

vue create my-project -i my-preset.json

跳過 git 初始化：

如果你不想在創建項目時初始化 git，可以使用 -n 選項：

vue create my-project -n

指定 npm 客戶端：

如果你想使用 yarn 而不是 npm 來安裝依賴，可以使用 -m 選項：

vue create my-project -m yarn

注意事項

當你運行 vue create 命令時，它會根據你的選擇下載和安裝相應的依賴項，并為你創建一個新的 Vue.js 項目目錄結構。
在執行 vue create 命令之前，確保你已經安裝了最新版本的 Node.js 和 Vue CLI。
根據你的需求和偏好，選擇適當的選項來定制你的項目配置。

三、Vue3 項目目錄結構

Vue3 項目的目錄結構通常包含以下主要部分：

node_modules：這個目錄包含了項目運行所依賴的所有 npm 包。這些包是通過運行 npm install 或 yarn install 命令安裝的。
public：這個目錄包含靜態資源，這些資源不會被 webpack 處理，而是直接被復制到最終的構建目錄中。常見的文件包括：

index.html：項目的入口 HTML 文件，通常包含了應用的根元素和一些初始化的 JavaScript 代碼。
favicon.ico：網站的圖標文件。
其他靜態資源，如圖片、字體等。

src：這是項目的源代碼目錄，包含了所有的 Vue 組件、JavaScript 代碼、樣式文件等。

assets：存放靜態資源，如圖片、字體文件、CSS 文件等。
components：存放 Vue 組件文件，這些組件通常是可復用的 UI 元素。
views（或 pages）：存放頁面級別的 Vue 組件，每個組件通常對應一個路由頁面。
router：存放 Vue Router 的配置文件，定義了路由規則和頁面之間的導航。
store：如果項目使用 Vuex 進行狀態管理，這里會存放 Vuex 的相關文件。
App.vue：Vue 應用的根組件，通常包含了整個應用的布局和路由視圖。
main.js（或 main.ts）：項目的入口文件，用于初始化 Vue 應用、導入全局樣式和配置等。
App.vue：根組件文件，包含了整個應用的布局和路由視圖。
main.js：項目的入口文件，用于實例化 Vue 應用，并導入所需的插件、組件和樣式。

.gitignore：這個文件用于配置哪些文件不應該被 Git 跟蹤，即不會被提交到版本控制系統中。
package.json：這是項目的配置文件，包含了項目的元信息、依賴項、腳本命令等。你可以通過運行 npm install 或 yarn install 命令來根據這個文件安裝項目依賴。
README.md：這是項目的說明文檔，通常包含了項目的介紹、運行命令、貢獻指南等信息。
vue.config.js（可選）：這是 Vue CLI 的項目配置文件，用于修改默認的 webpack 配置和其他 Vue CLI 的配置。

四、Vue3 起步實例

在 Vue 3 中，起步實例代碼通常包括以下幾個步驟：

創建一個 Vue 應用實例。
定義應用的根組件。
掛載這個實例到 DOM 中的某個元素上。

下面是一個簡單的 Vue 3 起步實例代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 Starter</title><!-- 引入 Vue 3 --><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!-- 定義掛載點 -->
<div id="app"><!-- 使用雙花括號插值顯示消息 -->{{ message }}<!-- 使用 v-bind 指令綁定屬性 --><button v-bind:disabled="isButtonDisabled">Click Me</button><!-- 使用 v-on 指令監聽點擊事件 --><button v-on:click="toggleButton">Toggle Button</button>
</div><!-- Vue 3 實例代碼 -->
<script>const app = Vue.createApp({// 定義數據data() {return {message: 'Hello Vue 3!',isButtonDisabled: false}},// 定義方法methods: {toggleButton() {this.isButtonDisabled = !this.isButtonDisabled;}}});// 掛載實例app.mount('#app');
</script></body>
</html>