---
# System prepended metadata

title: 從composition API 開始VUE的生活-環境建立
tags: [Vue, Vite, composition API]

---

###### tags: `Vue` `composition API` `Vite`
{%hackmd BJrTq20hE %}
# 從composition API 開始VUE的生活-環境建立
## 環境建立
先確認你有裝node.js
打開cmd，也就是小黑窗
輸入
```
node -v
```
有出現下圖就沒問題了
![](https://i.imgur.com/GtB0c2p.jpg)

### 1.找個風水寶地創一個資料夾
![](https://i.imgur.com/1J6ZP1p.jpg)
### 2.開啟VScode
左上角有個檔案->開啟資料夾->找到1.的資料夾打開
### 3.環境設定VUE
按ctrl+\` 終端機，輸入
```
npm init vue@latest
```
按確定

接下來就按照需求選擇要安裝的內容
![](https://i.imgur.com/Kni5Nyi.jpg)
出現下面的畫面就代表設定好了
![](https://i.imgur.com/ygIODI7.jpg)

### 4. 安裝vue

接著輸入
```
cd prictice
npm install
npm run dev
```
cd prictice 代表進入剛剛設定的project資料夾
npm install 安裝剛剛設定時要的套件
npm run dev 運行環境

出現下面圖就代表安裝完成啦
![](https://i.imgur.com/4nvvzR8.jpg)

按住ctrl+點擊`Local:http:/127.0.0.1:5173`
就會出現下圖
![](https://i.imgur.com/4rXwwXx.jpg)
代表環境安裝完成，可以開始開發啦。

參考資料
---
[Vue3 + Vite 快速上手 Get Startrd EP1 - 初探 Vite 專案 / Vue3 初學者應該要先知道的東西 / 剛開始寫 Composition API 會犯的錯誤 !](https://www.youtube.com/watch?v=rNQIA0Fe9KQ&lc=UgyqD7KRj_fR9ucomzN4AaABAg.9dBNDjhrFaj9dD6z6gxDvg)