---
# System prepended metadata

title: 前端開發流程指南

---


ChatGPT
1. [https://chatgpt.com/share/cd1d4b08-5bb6-4586-8067-c098c4f2bb3a]
2. []
3. []

 
- **使用工具**：
    - Jira：用於需求管理和追蹤。
    - Confluence：用於文檔編寫和團隊協作。





### 前端開發流程指南
[ChatGPT_建構前端開發流程指南1](https://chatgpt.com/share/2b6da00b-cc8a-4d35-96db-5dcb37956a93)

### 1. 基本環境配置

#### 工具安裝

1. **安裝 Node.js 和 npm**:
    
    - 前往 [Node.js 官方網站](https://nodejs.org/) 下載並安裝最新的 LTS 版本。安裝 Node.js 後，npm 會自動隨之安裝。
    - 打開命令行工具，輸入以下命令安裝:
	    ```powershell
	    node -v
	    npm -v
		```

2. **安裝 Vue CLI**:
	
	- 打開命令行工具，輸入以下命令安裝 Vue CLI：
		```powershell
		npm install -g @vue/cli
		```

3. **安裝 Vite**:
	
	- Vite 是一個快速的前端構建工具，可以通過 npm 安裝。
	- 打開命令行工具，輸入以下命令安裝 Vite:
	    ```powershell
	    npm install -g create-vite
		```

4. **安裝 Three.js**:
	
	- Three.js 可以作為 npm 包來安裝，在專案初始化後進行安裝(稍後安裝)。


#### 專案初始化

1. **初始化 Vue3 專案**：
    
    - 使用 Vite 創建一個新的 Vue3 專案， `my-vue-app` 為你的專案名稱：
        
		```powershell
		npm init vite@latest my-vue-app --template vue
		cd my-vue-app
		```

2. **安裝依賴**：
    
    - 在專案目錄下運行以下命令來安裝依賴：
        
		```powershell
		npm install
		```

3. **安裝 Three.js**：
    
    - 在專案目錄下運行以下命令來安裝 Three.js：
        
		```powershell
		npm install three
		````

4. **設置基本文件結構**：
    
    - 確保專案目錄中有以下基本文件結構：
        
	    ```
	    my-vue-app/
		├── public/
		├── src/
		│   ├── assets/
		│   ├── components/
		│   ├── App.vue
		│   ├── main.js
		│   └── router/
		├── index.html
		├── package.json
		└── vite.config.js

		```

#### 代碼範例

**main.js**：

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';

createApp(App).mount('#app');
```

**App.vue**：

```vue
<template>
  <div id="app">
    <h1>Hello, Vue 3 + Vite + Three.js!</h1>
    <!-- 在這裡插入 Three.js 相關內容 -->
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```


