# Vue

**引入方式**

# 全局

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    },
    methods: {
        test() {
            console.log('test');
        },
    },
    created() {
        this.test();
    }
  }).mount('#app')
</script>

# ES

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    },
    methods: {
        test() {
            console.log('test');
        },
    },
    created() {
        this.test();
    }
  }).mount('#app')
</script>

****安裝 vue cli****

npm install -g @vue/cli

**更新**

npm update -g @vue/cli

**創建一個新的專案**
`vue create hello-world`(專案名稱)
* Babel,
* Router(n),
* Css pro處理器(node版本),
* Lint檢查程式碼 (standart config),save檢視

**使用UI圖板顯示**
`vue ui`

**測試**

npm run serve

**清除緩存**

npm cache clean --force

**打包**

npm run build

**Prettier格式化**

npx prettier --write .

# Vite
`npm create vite@latest`

**Vite 測試**
`npm run dev`

**Vite 創建**
`npm run build`

**Vite router#**
更改Router 內 index
createWebHistory => createWebHashHistory

**Eslint**
快捷 Alt+Shift+F

**Vite GitPage**

在 vite.config.js 裡，新增 Base
* 如果您要部署到https://<USERNAME>.github.io/，則可以省略，base因為它默認為'/'。
* 如果您要部署到https://<USERNAME>.github.io/<專案名>/，例如您的存儲庫位於https://github.com/<USERNAME>/<專案名>，則設置base為'/<專案名>/'。

* 在您的項目中，deploy.sh使用以下內容創建（適當取消註釋突出顯示的行），然後運行它進行部署：
在終端機執行 sh.deploy.sh

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# place .nojekyll to bypass Jekyll processing
echo > .nojekyll

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -B main
git add -A
git commit -m 'deploy'
    
#擇一
    # if you are deploying to https://<使用者名>.github.io
    # git push -f [e-mail]:<使用者名>/<使用者名>.github.io.git main

    # if you are deploying to https://<使用者名>.github.io/<專案名>
    # git push -f [e-mail]:<使用者名>/<專案名>.git main:gh-pages

cd -