Vue

Vue & Firebase Realtime Database CRUD

新增資料夾 config/firebaseConfig.js’內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
導入資料庫
import firebase from ‘firebase/compat/app’
import ‘firebase/compat/auth’
import ‘firebase/compat/firestore’
import ‘firebase/compat/database’

const config = {
apiKey: “apiKey”,
authDomain: “apiKey”,
databaseURL: “apiKey”,
projectId: “apiKey”,
storageBucket: “apiKey”,
messagingSenderId: “apiKey”,
appId: “apiKey”
}

firebase.initializeApp(config);
let app = null
if (!firebase.apps.length) {
app = firebase.initializeApp(firebaseConfig)
}


export const ref = firebase.database().ref()
export const firebaseAuth = firebase.auth;

export const db = firebase.database()
export const StoreDB = firebase.firestore()
export default firebase

Create

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!–訊息表單新增–>
<template>
<form @submit.prevent=”addMessage“>

<div class=”form-group”>
<label>Name:</label>
<input type=”text” class=”form-control” v-model=”message.subject”/>
</div>

<div class=”form-group”>
<label>message</label>
<input type=”text” class=”form-control” v-model=”message.desc”/>
</div>

<div class=”form-group”>
<input type=”submit” class=”btn btn-primary” value=”送出”/>
</div>

</form>

</template>

<script>
import firebase from ‘@/config/firebaseConfig.js’;
const messageRef = firebase.database().ref(‘/message/’);

export default {
data () {
return {
message:”,
}
},
methods: {
addMessage() {
//資料表 .push({ })
messageRef.push({
subject: this.subject,
desc: this.desc,
timeStamp: new Date()
})
},
}
create(){
this.addMessage();
}

}

</script>

Read

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
<div>
<ul>
<li v-for=”item in message” :key=”item.index”>
{{ item.subject }} – {{. item.desc. }}
</li>
</ul>
</div>
</template>

<script>
import firebase from ‘@/config/firebaseConfig.js’;
//資料表名稱message
const messageRef = firebase.database().ref(‘/message/’);


export default {
data () {
return {
message:”
}
},
methods: {
getMessage () {
const vm= this;
// 簡寫 messageRef.on(‘value’,(snapshot) =>{
messageRef.on(‘value’, function(snapshot) {
vm.message = snapshot.val();
})
}
},
create(){
this.getMessage () ;
}
}
</script>

Firebase 語法

ref()：尋找資料庫路徑
set()：新增資料
on(隨時監聽)
push – 新增資料
child 子路徑
remove 移除

Vue

SCSS 入門：變數、巢狀、混入、繼承

& ,> ,+,~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.onclick{
  //自己
  &.onclick{
      color:green;
     cursor: pointer;
  }
  //children-必須是親生的才可以
  > .icon{
    color:#2196f3;
  }
  //同一階的第一個
  + .content {     
    color:red; 
  } 
  //~，同一階-弟弟妹妹們都獲選
  ~ .test{
    color:blue;
  }

&

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.menu {
  .open & {
   display:flex;
   color:green;
   font-size:38px; 
  }
}
//
編譯後
.menu {
  .open & {
   display:flex;
   color:green;
   font-size:38px;
  }
}

&

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
scss
.list {
 color: red;

  &__item {
    color: cornflowerblue;

    &--active {
      color: blue;
    }
  }
}
/*編譯後
.list {
  display: flex;
}

.list__item {
  color: red;
}

.list__item--active {
  color: blue;
}

變數 Variables:$開頭

Scss

1
2
3
4
5
6
7
$font-stack:  Helvetica, sans-serif;
$primary-color: #2196f3;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

變數編譯後Css

1
2
3
4
5
body {
  font: 100% Helvetica, sans-serif;
  color: #2196f3;
}

巢狀

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    &:hover {
      color: red;
    }
  }
}

巢狀編譯後Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
nav a:hover {
  color: red;
}

混入 Mixins

@mixin，@include

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 經常重複使用的樣式
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

// 需要套用樣式的程式碼
.box { 
  @include transform(rotate(30deg));
}
.avatar { 
  @include transform(rotate(90deg));
}

混入 Mixins編譯後Css

1
2
3
4
5
6
7
8
9
10
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.avatar {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

混繼承 Extent/Inderitance

@mixin，@include

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  @extend %flex-center;
  background-color: red;
}

.section {
  @extend %flex-center;
  background-color: blue;
}

.footer {
  @extend %flex-center;
  background-color: green;
}

混繼承 Extent編譯後Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

.header, .section, .footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  background-color: red;
}

.section {
  background-color: blue;
}

.footer {
  background-color: green;
}

@mixin 和 @extend 使用

@mixin 的好處:減少重複撰寫樣式，卻也可能造成編譯後的 CSS 樣式大量重複，使檔案異常肥大。

@mixin 和 @extend 兩者的使用時機與差異

是否需傳遞參數
是否需考慮編譯後 CSS 大小

模組 Modules

編譯前 SCSS：要作為模組載入的 SCSS 檔案，名稱必須帶有底線，例如 _base.scss。

Vue

Sass 安裝

方法一

npm 安裝

建立編譯環境

1
npm install -g sass

sass –version版本號

1
sass --version

參考資料
sass 安裝

# 新增styles.scss 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$primary: #30c39e;
%transition{
 transition: all .3s ease;
}

.btn {
  background: $primary;
  @extend %transition;
  &:hover {
    background: darken($primary, 5%);
  }
  &:active {
    background: darken($primary, 10%);
  }
}

進入在你的scss檔案的資料夾，並執行sass watch監控sass 輸出 css 
1
2
3
4
//window
sass --watch rwdScss:rwdCss 
或
sass scss\styles.scss css\styles.css

方法二

vs-code 安裝套件：Live Sass Compiler

指定輸出CSS的路徑：

喜好設定->設定打開Setting .json

設置參數放工作區設定的大括弧內

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//css產出設定
   "liveSassCompile.settings.formats": [
       {
           "format": "expanded",
           "extensionName": ".css",//
           "savePath": "/css"///輸出的路徑
       },
{
          "extensionName": ".min.css", //正式版副檔名為min.css
          "format": "compressed", //壓縮成一行css，正式版本
          "savePath": "/dist/style"
        }
   ],

建立一個資料夾:

內有scss/style.scss

視窗下方藍色區域是否出現了一個小小的按鈕寫著Watch Sass，按下執行

畫面會新增 style.css.map
畫面會新增 style.css

Vue

Vue Google Sheet Api憑證申請與串接

ConsoleGoogle

一.申請Ｇoogle Sheet Api憑證

Step1.新增專案

Step2.啟用Api服務

搜尋Ｇoogle Sheet

啟用Ｇoogle Sheet服務

Step3.建立憑證(api金鑰 /Oauth /服務帳戶）

api金鑰:key=API_KEY

憑證＝>點選API金鑰

=>金鑰限制 ＝> 應用程式限制 =>HTTP 參照網址 (網站)

=>網站限制 =>點選新增:新增網址

＝>API 限制:不限制金鑰

如果只是使用Google Sheet 以下（Oauth,服務帳戶)非必要
Oauth


服務帳戶

Ａpi金鑰(憑證Ａpi金鑰)等下串接會用到

二.新增Sheet試算表 粗字體是docId

https://docs.google.com/spreadsheets/d/19YWnM9PrXXEUOcT9zWkQYpiZ1W3o6i-UToEGsUPcFcU/edit#gid=0 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <div class="hello">
      <table class="Lists" align="center">
        <tr v-for="item in lists" :key="item">
          <td v-for="j in item" :key="j">{{ j }}</td><td><i class="fa-solid fa-circle-plus"></i></td>
        </tr>
      </table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios';

const lists = ref<any>();
const getData = async () => {
//docId=>文件id
  const docId = '憑證Ａpi金鑰';
  const apiKey = '試算表的ID';
  const api = `https://sheets.googleapis.com/v4/spreadsheets/${docId}/values/商品列表?alt=json&key=${apiKey}`;

 await axios
    .get(api)
    .then(res => {
      lists.value = res.data.values;
      console.log(res.data);
      for (var i = 0; i <= lists.value.length; i++) {
        // title
        var title = lists.value[0];
        var objTitle = {};
        for (var j = 0; j <= title.length; j++) {
          objTitle = title[j]
        }
      }
      });

}

onMounted(() => {
  getData();
});
</script>

錯誤訊息大全

404

處理方式：=>網站限制 =>點選新增:新增網址 =>API 設置為不限制 =>金鑰限制 ＝> 應用程式限制 =>HTTP 參照網址 (網站) =>網站限制 =>點選新增:新增網址 ＝>API 限制:不限制金鑰

403

Requests from referer \u003cempty\u003e are blocked.
處理方式：API 設置為不限制
＝>API 限制:不限制金鑰

檢查你的 Sheet Id 能否正確取得資料

權限被拒絕

permissionPERMISSION DENIED
處理方式：
命名工作區

將Ｇoogle Sheet 改為共用

改為 Pinia Composition API寫法

安裝 Pinia

新增stores / googlesheet.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { defineStore } from 'pinia';
import axios from "../utils/http";
import { ref } from 'vue';

export const useGooglesheetStore = defineStore('googlesheet', () =>
{ 

  const getLists = ref();
    const getGoogleSheetData = async() =>
    {
    const docId =  import.meta.env.VITE_API_GOOGLE_SHEET_ID;
    const apiKey =  import.meta.env.VITE_API_GOOGLE_KEY;
    const api = `https://sheets.googleapis.com/v4/spreadsheets/${docId}/values/商品列表?alt=json&key=${ apiKey}`;
        try {
            const res = await axios.get(api);
            getLists.value = res.data.values;
            console.log(getLists.value)
        } catch (error) {
            console.log(error)
        }
     
    }
    return {
      getGoogleSheetData,getLists
    }
})

＃專案內：.env.development,.env.production,.env.staging
新增

1
2
3
VITE_API_GOOGLE_KEY = GOOGLE_KEY

VITE_API_GOOGLE_SHEET_ID = GOOGLE_SHEET_ID

#頁面使用goolgesheet 數據
//引入{ storeToRefs } from ‘pinia’＝>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div class="hello">
        <table class="Lists" align="center">
            <tr v-for="item in getLists" :key="item">
                <td v-for="j in item" :key="j">{{ j }}</td>
                <td><i class="fa-solid fa-circle-plus"></i></td>
            </tr>
        </table>
    </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
// @ts-ignore
import { useGooglesheetStore } from '../stores/googlesheet';
const store = useGooglesheetStore();
//數據的解構
const { getLists } = storeToRefs(store);
//function 的解構
const { getGoogleSheetData } = store;

onMounted(() => {
    getGoogleSheetData()
});
</script>

將你的試算表轉成Api

將您的 Google 試算表轉換為 REST API

選擇登入

Step1 建立連結


Step2 將Google Sheet改為共用，並且 貼到共用的連結表單



Vue

Vue 天氣Ａpi

OpenWeatherMap
建立一個帳號，建立一個金鑰
https://openweathermap.org/

#使用fetch
${ import.meta.env.VITE_API_URL }，${ import.meta.env.VITE_API_KEY }為環境變數
請參閱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script setup lang="ts">
import { ref, onMounted } from 'vue'
interface listType {
  dt?: number | null,
  message?: number | null,
  cnt?: number | null,
  list:any[]
}

interface weatherType {
  cod?: number|null,
  message?: number | null,
  cnt?: number | null,
  list: listType[]
}

const weathers = ref<any>();
const getData = async () => {
  const api = `${import.meta.env.VITE_API_URL}forecast?q=Taichung,tw&APPID=${import.meta.env.VITE_API_KEY }&lang=zh_tw&units=metric`
  try {
    const data = await fetch(api);
    if (!data.ok) {
      throw Error('fetch data 失敗');
    }
    if (data.status === 200) {
      weathers.value = await data.json();
      console.log(await data.json())
    }
  } catch (error) {
   // throw Error(error?:any)
  }
}
onMounted(() => {
  getData();
});
</script>
Vue

Vite vue語法糖 axios （api 串接方式）

安裝

1
npm install axios --save

Vite 環境變數使用方式

  • 引入axios import axios from 'axios'
  • 新增interface listType
  • 定義list 為陣列 const lists = ref([]);
  • 使用 async ...await
  • try ...catch
  • 環境變數的使用：反斜線與${import.meta.env.環境變數的名稱} 例如：`${import.meta.env.VITE_API_URL}/api/questions`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script setup lang="ts">
import { ref,onMounted } from 'vue'
import axios from 'axios'

interface listType {
  UID?: string;
  category?: string;
  comment?: string;
  descriptionFilterHtml?: string;
  discountInfo?: string | any;
  editModifyDate?: string;
  endDate?: string;
  hitRate?: number;
  imageUrl?: string;
  masterUnit?: object;
  otherUnit?: object;
  showInfo?: object;
  showUnit?: string;
  sourceWebName?: string | any;
  sourceWebPromote?: string;
  startDate?: string | any;
  subUnit?: object;
  supportUnit?: object;
  version?: string;
  title?: string | any;
  webSales?: string;
}
const lists = ref<listType[]>([]);
const getData = async () => {
  try {
    const api = `${import.meta.env.VITE_API_URL}/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200`;
    await axios.get(api)
    const res = await axios.get(api);
    console.log('culture', res.data, typeof res.data[0].masterUnit
      , 'otherUnit', typeof res.data[0].otherUnit, 'showInfos', typeof res.data[0].showInfo);
    if (res.status === 200) {
      lists.value = res.data;
    }
   
  } catch (error) {
    console.log(error)
  }

}
onMounted(() => {
  getData();
})
</script>

github 說明-axios 安裝與使用
github 說明-axios 安裝與使用

Vue

Vite 安裝與環境變數設定

Vite 6安裝
node 20.15.1
gitHub上的說明(vite ^6.0.1”)

相容性說明

Vite6 出現Pwa loader 404。

必須安裝PWA漸進式參考gitHub上的說明

相容性說明

Vite 需要 Node.js 版本 18+。 20+。 但是，某些模板需要更高的 Node.js 版本才能運作，如果您的套件管理器發出警告，請升級。

這裡使用node版本 v18.12.1 ### 終端機安裝指令 
1
npm create vite@latest 資料名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

? Project name: › vite-project //專案名稱
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Others
? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript
    Customize with create-vue ↗
    Nuxt ↗

參考官網 
1
2
3
4
cd vite-project
npm install
npm run dev

安裝完成
gitHub上的說明

gitHub上的說明(vite ^5.1.0”)

環境變數設定

修改vite.config.js 檔案，加入以下

1
2
3
4
5
6
7
8
9
10
11
import { fileURLToPath, URL } from 'node:url';
import { resolve } from 'path';
export default defineConfig({
  base: "/",
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  envDir: resolve(__dirname, './env'),
})

當從命令列執行 vite 時，Vite 會自動嘗試解析專案根目錄中名為 vite.config.js 的設定檔（也支援其他 JS 和 TS 擴充功能）。
最基本的設定檔如下所示：
官網說明
完整檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from "node:url"
import { resolve } from "path"

export default defineConfig({
  base: '/',
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // css 配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/base.scss";`
      }
    }
  }
  envDir: resolve(__dirname, './env'),
});

處理錯誤：修改vite.config.ts配置與安裝 @types/node

1
npm install --save-dev @types/node

＊＊在專案內加入env資料夾資料夾內新增：.env.development,.env.production,.env.staging

開發端環境.env.development

1
VITE_API_URL = '開發端環境Api網址'

正式主機位置.env.production

1
VITE_API_URL = '正式主機位置Api網址'

測試環境.env.staging

1
2
# QA測試環境
VITE_API_URL = 'QA測試環境Api網址'

在頁面中使用環境變數
如果在開發中會得到開發中的變數，正式環境就得到正式環境中的變數，測試環境以此類推
環境變數的命名都大寫搭配底斜線如＝>VITE_API_URL=’https://xxx.tw‘
使用import.meta.env.VITE_API_URL

1
import.meta.env.VITE_API_URL

gitHub上的說明-新增環境變數
gitHub上的說明 頁面的使用import.meta.env.VITE_API_BASIC_URL
環境變數

TypeScript 的智能提示

在 src 目錄下建立 env.d.ts
增加 ImportMetaEnv

1
2
3
4
5
6
7
8
9
10
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多環境變量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}
package

package.json解析

package.json概述

當執行npm install指令的時候，會根據package.json檔案中的設定自動下載所需的模組
紀錄這個專案的各種模組，以及專案的設定資訊（例如名稱、版本、授權等）

name:必填的

必須小於等於214個字符，不能以.或_開頭，不能有大寫字母，因為名稱最終成為URL的一部分因此不能包含任何非URL安全字符。

version:必填的

名稱和版本一起構成一個標識符，該標識符被認為是完全唯一的

description

是一個字串組成的數組，有助於人們在npm庫中搜尋的時候發現你的模組

private

如果這個屬性被設定為true，npm將拒絕發布它，這是為了防止一個私有模組被無意間發佈出去

homepage

項目的主頁地址

bugs

用於專案問題的回饋issue地址或一個郵箱。

license

是目前專案的協議，讓使用者知道他們有何權限來使用你的模組，以及使用該模組有哪些限制。

author

author是具體一個人，contributors表示一群人，他們都表示當前專案的共享者。同時每個人都是一個物件。具有name欄位和可選的url及email欄位。

scripts 執行腳本指令

執行腳本指令的npm命令列縮寫，例如start指定了執行npm run start時，所要執行的命令。

dependencies 指定了專案運作所依賴的模組

當安裝依賴的時候使用–save參數表示將該模組寫入dependencies屬性

devDependencies

–save-dev表示將該模組寫入devDependencies屬性。

peerDependencies

bundledDependencies 指定發佈的時候會被一起打包的模組

engines 欄位指明了該模組運作的平台

例如Node或npm的某個版本或瀏覽器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
  "name": "unit_test_project", //必填的
  "private": true,
  "version": "0.0.0",
  "description": "unit_test",
   "keywords":["node.js","unit test", "theme"],
  "homepage": "https://zhiqianduan.com",
  "author": "larahuang",
  "man" :[ "./doc/calc.1" ]
  "type": "module",
  "bugs": { 
    "url" : "https://github.com/owner/project/issues",
    "email" : "project@hostname.com"
    }
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "test:unit": "vitest --environment jsdom",
    "preview": "vite preview"
  },
  "config": { "port" : "5173" },
  "dependencies": {
    "vue": "^3.4.31"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/test-utils": "^2.4.6",
    "jsdom": "^24.1.1",
    "typescript": "^5.2.2",
    "vite": "^5.3.4",
    "vitest": "^2.0.4",
    "vue-tsc": "^2.0.24"
  },
  { "engines" : { "node" : ">=0.10.3 <0.12", "npm" : "~1.0.20" } }
}

參考資料

package.json文件

Vite Unit Test,Vite 單元測試

Vite 單元測試與設置

首先先建立Vite專案 Vite 安裝 typescript

安裝範例是 Vite7 Vue@3.5.17 TypeScript@5.8.3 範例

在專案根目錄安裝vitest @vue/test-utils jsdom

建立專案時要加入單元測試必須在Vitest 需要 Vite >=v5.0.0 和 Node >=v18.0.0

安裝測試工具
  • vitest：單元測試框架（提供了執行測試的環境、斷言、隔離庫⋯⋯等等功能與 API）
  • @vue/test-utils：測試 Vue 元件的工具
  • jsdom：讓我們可以在 Node 環境模擬出瀏覽器中的 DOM 環境（方便測試）
1
2
cd 到專案
npm install -D vitest @vue/test-utils jsdom

在專案根目錄安裝vitest @vue/test-utils jsdom

jsdom：是一個可以使用類似dom元件操作方式來操作html text的工具
在 ~專案根目錄/package.json
執行腳本指令新增單元測試所需要的指令
scripts加入
“test”: “vitest –environment jsdom”,（啟動單元測試指令時環境內的jsdom）

設定檔 package.json行腳本指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"scripts": {
   "dev": "vite",
   "build": "vue-tsc -b && vite build",
   "preview": "vite preview",
   "test": "vitest --environment jsdom"
 },
 "dependencies": {
   "vue": "^3.5.17"
 },
 "devDependencies": {
   "@vitejs/plugin-vue": "^6.0.0",
   "@vue/test-utils": "^2.4.6",
   "@vue/tsconfig": "^0.7.0",
   "jsdom": "^26.1.0",
   "typescript": "~5.8.3",
   "vite": "^7.0.4",
   "vitest": "^3.2.4",
   "vue-tsc": "^2.2.12"
 }

範例：子元件 mount,props
在 src/components/內新增HelloWorld.spec.js

解釋名詞：mount
mountVue 中的 Test Utils 是測試 Vue 元件的關鍵函數。 它是創建 Vue 應用程式的主要方法，該應用程式在測試環境中託管和渲染被測元件。

describe & it 輔助 API
準備 => 操作 ＝> 斷言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//引入描述、它、斷言 如果在使用
import { describe, it, expect } from 'vitest' 
//引入測試實用程式
import { mount } from '@vue/test-utils'
//引入元件
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld', () =>
{
  it('1+1 應該是2', () => {
    expect(1 + 1).toBe(2)
  })

  it('正確渲染', () => {
    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
    expect(wrapper.text()).toContain('Hello Vitest')
  })

  it('在此測試檔案中使用 jsdom', () => {
    const element = document.createElement('div')
    element.innerHTML = '<p>Hello, HTML!</p>'
    expect(element.innerHTML).toBe('<p>Hello, HTML!</p>')
  })
})

執行啟動單元測試指令

1
npm run test

github安裝單元測試與執行啟動單元測試指令

得到以下

github

單元測試覆蓋

Vitest 支援兩種程式碼覆蓋率引擎，v8 和 Istanbul。
v8 使用Chrome v8 引擎中內建的程式碼覆蓋率測量。
v8 的一大優點是不需要預先檢測和轉譯。
v8 無法區分 if 語句、三元條件或 for 迴圈中的條件。它將它們全部突出顯示為條件表達式。

Istanbul是一個歷史悠久的 JavaScript 測試覆蓋率工具。
Istanbul檢測需要使用 Babel 插件實現轉譯過程。幸運的是，一切都由 Vitest 為您處理。
Istanbul的一大優勢是偵測發生在單行程式碼的層級。您應該得到非常精確的結果。只有您感興趣的程式碼才會被偵測。

安裝@vitest/coverage-v8 與vitest/coverage-istanbul指令

1
2
npm install -D @vitest/coverage-v8
npm install -D @vitest/coverage-istanbul

維測試介面

1
npm install -D @vitest/ui

vitest 在typescript vite.config 的設置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'
//型別設置
interface vitestConfigType {
 include: string[],
  globals: boolean,
  environment: string,
  exclude:string[],
  coverage: object,
}
//定義vitestConfig
const vitestConfig: vitestConfigType = {
   //默认值: ['**/*.{test,spec}-d.?(c|m)[jt]s?(x)']
   // 在這裡加入測試設定：.spec.js類型都執行單元測試
  include:['**/*.spec.js'],
  globals: true,//全域:就不需要顯示引入 vitest 測試相關的 API，讓測試看起來更乾淨
  environment: "jsdom",
   //匹配排除测试文件，以下是預設
 exclude:['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**'],
  coverage: {
    all: true,
    //默認v8
    provider: 'v8',
    reporter: ['text', 'json', 'html'],
    include: ['src/**.{vue,ts}'],
    //排除
    exclude: ['**/utils/users.ts']
  }
};


export default defineConfig({
  plugins: [
    vue()
  ],
  //設置vitestConfig
  test:vitestConfig,
})

在package.json 修改以下

1
2
3
4
"scripts": {
  "test": "vitest",
  "coverage": "vitest --coverage"
},

執行啟動單元測試指令

1
2
npm run test
npm run coverage
執行啟動npm run coverage 後專案根目錄會產生了一個coverage 資料夾內index.html即是以下圖片 覆蓋率列表 所有文件 38.59% Statements（聲明） 22/570% Branches （分行） 0/20% Functions（函式） 0/338.59% Lines （行） 22/57 單元測試覆蓋率,維測試介面與 設置

使用data-* 作為選擇目標好處最主要在於顯著標記測試內容

在生產環境刪除 data-* attribute
若想在 vitest 中移除 data-* 也非常的簡單，我們只需要在 vite.config.js 設定中，針對 Vue 底下的編譯選項做一些調整即可（底下示範的版本為移除 data-test，若使用其他命名請自行調整囉）：
vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const isProd = process.env.NODE_ENV === 'production'
const removeDataTestAttrs = (node) => {
  const NodeTypes = Object.freeze({
    ELEMENT: 1,
    ATTRIBUTE: 6,
  })
  if (node.type === NodeTypes['ELEMENT']) {
    node.props = node.props.filter((prop) => (prop.type === NodeTypes['ATTRIBUTE'] ? prop.name !== 'data-test' : true)) // 請自行替換命名 data-test 
  }
}

export default defineConfig(() => {
  return {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            nodeTransforms: isProd ? [removeDataTestAttrs] : [],
          },
        },
      }),
    ]
  }
})

模擬 HTTP 請求

組件有串接Api時

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
GuessAge.vue
<template>
  <h1 data-test="title">{{ title }}</h1>
  <div class="card">
   <div style="width:400px;height:130px;margin-top:20px;border-style: dotted;" >
   <br>
    <span>Firsthand: {{firstname}}</span> <br>
    <span>Age: {{age}}</span> 

    </div>
     <label> Enter Firstname </label><br>
     <input type="text" v-model="search" style="font-size:20px;border-radius:10px; border:2px solid red"/> 
   <a style="width:50px;height: 50px; background:red;"
   data-test="getAge"
   @click="getAge">Guess Age</a>
    <input type="radio" value="pop"> <label>Save my data</label>
  </div>
</template>

<script setup lang="ts">
import { ref,computed } from 'vue'

const props = defineProps({ 
        title:{type:String},
})
    const search = ref<string>('');
    const age = ref<string>('');
    const firstname = ref<string>('');
    const getAge =() => { 
        fetch('https://api.agify.io/?name='+ search.value)
            .then(response => response.json())
            .then(data => {
                age.value = data.age
                firstname.value = data.name
                search.value=""
            })
    }
</script>

安裝 msw 

1
npm install msw --save-dev

建立假資料
新增src/mocks/handlers.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/mocks/handlers.js
//模擬 HTTP 請求
import { http, HttpResponse } from 'msw'
const api = "https://api.agify.io/";
export const restHandlers = [
   http.get(api, (req, res, ctx) =>
   {
      const query = {
           age: 55,
            name: "tope"
      }
      console.log('ctx.json',ctx.json([ query]))
      return res(ctx.status(200), ctx.json([
        query
      ]))
   }),
]

攔截 http 請求
生成地方

1
2
3
4
//
npx msw init 生成模擬Api資料夾 --save
//這時候就會在 public 資料夾下建立一個 mockServiceWorker.js 檔案，裏面就有攔截 http request 的程式碼了
npx msw init ./public --save

生成模擬Api資料夾
參考資料
GuessAge測試文件
GuessAge測試文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
//GuessAge.spec.js
import { describe, it, expect, afterEach, beforeAll, afterAll, beforeEach } from 'vitest'
 import { setupServer } from 'msw/node'
import { mount } from "@vue/test-utils";
import GuessAge from "../GuessAge.vue";
//引入Api模擬
import { restHandlers }  from "../../mocks/handlers";

const server = setupServer(...restHandlers)
// 在所有測試之前啟動伺服器
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
//  所有測試後關閉伺服器
afterAll(() => server.close())
// 每次測試後重置處理程序“對於測試隔離很重要”
afterEach(() => server.resetHandlers())
describe('GuessAge', () =>
{
    let wrapper
    const title = 'Guess User Age App'
    if (typeof document !== 'undefined') {
        beforeEach(() =>
        {
            wrapper = mount(GuessAge, {
                props: {
                    title
                }
            })
        })
    }
    it("測試 GuessAge 元件 props title", async () =>
    { 
        if (typeof document !== 'undefined') {
            expect(wrapper.find('[data-test="title"]').text()).toBe(title);
             
        }
    });
    it("測試資料是否為函數", () =>
    {
        expect(typeof GuessAge.data).toBe("undefined");
    });
    it('快照 UI 測試', () =>
    {
        if (typeof document !== 'undefined') {
            const wrapper = mount(GuessAge, {});
            expect(wrapper.text()).toMatchSnapshot()
        }
    })
    it("找到按鈕", () =>
    {
        if (typeof document !== 'undefined') {
          
            expect(wrapper.find('[data-test="getAge"]').exists()).toBe(true);
        }
    });

    it("按鈕點擊", async () =>
    {
        if (typeof document !== 'undefined') {
            const ac = await wrapper.get('[data-test="getAge"]').trigger("click")
            expect(wrapper.vm.search).toEqual("")
        }
    })
})

在元件測試中模擬 DOM API

安裝happy-dom

1
npm install happy-dom@6.0.4
1
npm i -D @vitest/coverage-istanbul

目錄

參考資料