---
# System prepended metadata

title: 6.0-Vite 初始化+輸出

---

---
# 6.0-Vite 初始化+輸出
---
# 6.0-Vite 初始化+輸出

# 一、初始

## 安裝

### 換機
![](https://i.imgur.com/dcdrK6M.png)
![](https://i.imgur.com/Fvf57D3.png)

如果要把複製的html轉pug
![](https://i.imgur.com/XZbv4zh.png)
操作方式:
選好範圍=>F1 => 打html2pug=>點擊後自動轉換


**換機看到此就好**


npm init vue@latest (直接裝vue3 就預設給vite)
![](https://i.imgur.com/yk11nTC.png)


(如果預設eslint初始化有問題的話，再用下方外部引入)
npm i -D ./eslint-config-standard-main
https://drive.google.com/file/d/1fly8iQEwRqkwV8NUo1_aY4frftgrbPG0/view?usp=sharing



npm i -D pug sass @vue/eslint-config-standard




---
## 基本建立
檔名記得駝峰式，不然報錯
![](https://i.imgur.com/ljiPc1y.png)

---

## 參數調整

.eslintrc.cjs
![](https://i.imgur.com/Tq6aCGe.png)


vite.config.js  =>  resolve: {...},base: './'
  
---

## 測試

npm run dev
複製網址貼上(記得自己f5 常不自動更新)
![](https://i.imgur.com/VyW2fnX.png)

---
## 清理檔案

![](https://i.imgur.com/vOSqO6o.png)

---

刪掉改空的
![](https://i.imgur.com/p4R99Lu.png)

---
1.清乾淨
![](https://i.imgur.com/ufjvKI0.png)
2.補上備註 
![](https://i.imgur.com/gOW9aJi.png)


---
# 二、建置內容

簡單建個方塊
![](https://i.imgur.com/H42hGUh.png)

---

[建議先看完下方流程，瞭解基本操作，再看此元件用法](https://hackmd.io/83atRIMyR4S3eGq7_cK9Ow)

---
# 三、輸出

## 初步檢查

npm run build 
(測試dist是否打包正常，上面改了assets路徑,index.html才是./ )
打開 index.html 看是否正常
(檔名大小寫不同無法測試出來)

---
## GitHub Actions


### 使用 GitHub Actions 自動編譯部署到 gh-pages 分支

在 master 分支的根目錄建立 .github/workflows/deploy.yml，複製貼上下方

``` js 
# Action 名稱
name: Deploy
# 觸發時機，當推送到分支 master 時
on:
  push:
    branches: [ master ]
# 執行的工作
jobs:
  # 工作名稱
  deploy:
    # 執行工作的虛擬機作業系統
    runs-on: ubuntu-latest
    # 工作步驟
    steps:
      # 步驟一：複製程式碼
      - name: checkout
        # 使用的 actions/checkout 複製程式碼
        uses: actions/checkout@v2.3.1
      # 步驟二：編譯
      - name: Install and Build
        run: |
          npm install
          npm run build
      # 步驟三：部署
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.1.1
        with:
          branch: gh-pages
          folder: dist
```

---
## git 

![](https://i.imgur.com/nNPjNjx.png)

![](https://i.imgur.com/I3v54vZ.png)

![](https://i.imgur.com/ipCB4NC.png)

![](https://i.imgur.com/Fezja8H.png)

![](https://i.imgur.com/RJ9LhMN.png)

![](https://i.imgur.com/jHMhW7K.png)

action正常執行
![](https://i.imgur.com/R8NhV25.png)

---
## github 建立頁面

![](https://i.imgur.com/NX3GW4W.png)

![](https://i.imgur.com/YRW4I7k.png)

等他跑完，如果報錯代表檔案有問題
![](https://i.imgur.com/I3Vd0qd.png)
---

## vue3使用Gsap
### 依正常用法會遇到gsap在抓元素，vue卻還沒把元素生成而報錯
![](https://i.imgur.com/bWEuIH4.png)


### vue3 + gsap步驟:
1. 如往常在index.html 匯入gsap的js檔(這樣整個vue都能抓到gsap變數)
```htmlmixed=
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
```
[最新版代碼從這生成](https://greensock.com/docs/v3/Installation)

---

2. 在要用gsap的vue頁面，把 gsap用onMounted包起來(唯一多一步驟)
```javascript=
import { onMounted } from "vue";
onMounted(() => {
//     gsap寫裡面，onMounted頁面載入完才讓gsap讀，就不會抓不到元件
  gsap.to("h1", {
    duration: 1.5,
    x: 100,
  });
})
```