---
# System prepended metadata

title: ■環境建置（按步驟）：

---

# ■環境建置（按步驟）：
1. 安裝NVM：管理node版本的工具
2. 安裝Node：建議使用NVM來安裝Node
3. 有node就能使用NPM：套件管理工具（npm 全名是node package manager）

* 安裝環境的參考教學：
https://www.casper.tw/development/2022/01/10/install-nvm/
* 查找各項套件的NPM服務平台：
https://www.npmjs.com/
# ■建立專案：
## (一) 使用 vite 建立專案，安裝指令：(以下my-vue-app指的是專案名稱)
### 如果npm版本是 npm 6.x
```
$ npm init vite@latest my-vue-app --template vue
```
### 如果npm版本是 npm 7+, extra double-dash is needed
```
$ npm init vite@latest my-vue-app -- --template vue
```
## (二) 建立專案成功後，在[專案資料夾]路徑下，安裝需要使用的套件，指令：
### 路由管理工具
```
$ npm i vue-router
```
### Ajax工具
```
$ npm i axios
```
### 狀態管理(依需求安裝)
```
$ npm i pinia
```
### 其他好用套件
* unplugin-auto-import
* unplugin-vue-components
* unplugin-icons
* 參考教學：
https://ithelp.ithome.com.tw/articles/10279017
# ■讓專案跑起來（在專案資料夾路徑下，依序）：
1. 安裝node_modules
```
$ npm i 
```
2. 啟動專案
```
$ npm run dev
```
# ■專案部署時：
### 打包專案
```
$ npm run build
```
### 預覽打包的結果
```
$ npm run preview
```
# ■官方網站
* VUE
https://vuejs.org/
* VITE(可以查vite.config.js怎麼寫)
https://vitejs.dev/
* PINIA
https://pinia.vuejs.org/
* Axios
https://axios-http.com/
* vue-router
https://router.vuejs.org/
# ■Youtube教學頻道
* Mike老師
https://www.youtube.com/@MikeCheng
* Alex老師
https://www.youtube.com/@AlexOtakuWhat
# ■教學網站
* 重新認識 Vue.js——008 天絕對看不完的 Vue.js 3.0 指南 by Kuro Hsu
https://book.vue.tw/
* vue.js菜鳥教程
https://www.runoob.com/vue3/vue3-tutorial.html

# ■VUE的線上編輯器
* https://sfc.vuejs.org/
* https://codesandbox.io/

# ■如果你想嘗試部署自己做好的靜態網站，可以試試放這裡：
https://vercel.com/