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

# 一、初始

## 安裝

### 換機

如果要把複製的html轉pug
操作方式:
選好範圍=>F1 => 打html2pug=>點擊後自動轉換

**換機看到此就好**

npm init vue@latest (直接裝vue3 就預設給vite)

(如果預設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

---
## 基本建立
檔名記得駝峰式，不然報錯

---

## 參數調整

.eslintrc.cjs

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

---

## 測試

npm run dev
複製網址貼上(記得自己f5 常不自動更新)

---
## 清理檔案


---

刪掉改空的

---
1.清乾淨
2.補上備註

---
# 二、建置內容

簡單建個方塊

---

[建議先看完下方流程，瞭解基本操作，再看此元件用法](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，複製貼上下方

# 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







action正常執行

---
## github 建立頁面



等他跑完，如果報錯代表檔案有問題
---

## vue3使用Gsap
### 依正常用法會遇到gsap在抓元素，vue卻還沒把元素生成而報錯

### vue3 + gsap步驟:
1. 如往常在index.html 匯入gsap的js檔(這樣整個vue都能抓到gsap變數)

 <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包起來(唯一多一步驟)

import { onMounted } from "vue";
onMounted(() => {
//     gsap寫裡面，onMounted頁面載入完才讓gsap讀，就不會抓不到元件
  gsap.to("h1", {
    duration: 1.5,
    x: 100,
  });
})