用Nuxt + Tailwindcss 建立Line的活動網站 + Firebase
Nuxt3 製作 Line 的活動
前言： 因為之前有幫客戶製做 LINE 的手機活動遊戲的前端但是哪時候用 Nuxt2 Vue2 目前 Vue3 已經穩定了 所以 2024 年了 我來更新一下前端的框架到 Nuxt3
建立 Nuxt3
1
2
3
4
5
6
7
8
npx nuxi@latest init <project-name>
# 會問以下問題
Which package manager would you like to use? yarn
Initialize git repository? yes
然後
1
cd <project-name>
安裝 dependencies
1
yarn install
打開測試 Server
1
yarn dev --open
http://localhost:3000/
初步設定完畢
安裝 Tailwind CSS 到 Nuxt
可以參考 Tailwindcss 的官方設定
01 安裝 Tailwind CSS
1
2
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init
yarn tailwindcss init 這個指令會去產生 tailwind.config.js 這個檔案
02 配置的模板路径
在 tailwind.config.js 文件中添加所有模板文件的路径。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue",
],
theme: {
extend: {},
},
plugins: [],
};
03 添加 Tailwind 指令到您的 CSS
創建一個 ./assets/css/main.css 文件，並為每個 Tailwind 層添加 @tailwind 指令。
1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;
04 加入 Tailwind 到 r PostCSS 設定
在 nuxt.config.js 文件中的 postcss.plugins 對象中添加 tailwindcss 和 autoprefixer 還有 main.css
1
2
3
4
5
6
7
8
9
10
11
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
css: ["~/assets/css/main.css"],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
});
安裝 LINE LIFF
可以參考 LIFF 官方文件
1
yarn add @line/liff
或是使用 CDN **目前我是使用這個方式
之前碰到一些坑有時候 liff 版本最新不一定是最好的 就碰到最新版的 liff 會有一些 bug
1
2
3
4
<script
charset="utf-8"
src="https://static.line-scdn.net/liff/edge/versions/2.22.3/sdk.js"
></script>
然後要加入到 nuxt.config.ts
這個專案不會使用 SSR,因為不會有 SEO 等的問題所以就是直接使用 ssr: false
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
export default defineNuxtConfig({
ssr: false,
devtools: { enabled: true },
css: ["~/assets/css/main.css"],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
app: {
head: {
htmlAttrs: {
lang: "zh-TW",
},
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content:
"width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes",
},
{ "http-equiv": "X-UA-Compatible", content: "IE=edge" },
],
script: [
{
src: "https://static.line-scdn.net/liff/edge/versions/2.22.3/sdk.js",
charset: "utf-8",
},
],
},
},
});
前端 Nuxt 建立
接下來先建立一下遊戲的頁面
這次會有範例是一個翻牌的遊戲，兩個相同為一對，一共有 8 組共 16 張，60 秒內要完成．完成後作抽獎，並且有一個抽獎後的獎品列表可以去做兌換．
頁面會是以下
- 首頁
- 遊戲説明
- 遊戲頁面
- 遊戲失敗畫面
- 遊戲通過畫面
- 抽獎頁面
- 抽獎成功
- 沒有中獎
- 抽獎紀錄
- 兌換説明
- 非遊戲時間
- 今天以抽獎過等待重置畫面
- 不是使用手機的畫面
概念是，使用 line 的粉絲群，點入進來後是使用 liff，這個可以拿到他的 lind id，以這個當作他的使用者資料．
這邊會是透過遊戲讓使用者拿到實體優惠，轉為到實體商店做消費做兌換，達到用戶來客率的方式．
這邊還會有一個後台，之後會串接道 google firebase，因為相對來說小活動不會花到錢，如果是大的活動同時讀取寫入的話穩定性也高不怕忽然很多人使用然後當機掉．(firebase 的 realtime database 連線數量為 200,000 相關參數可以考慮這邊)
這邊後須也需要做一個後台來上獎品以及兌獎後的數據統計後台(有空再來玩)
建立頁面
首先app.vue這邊要修改一下
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
首先先建立一個pages的資料夾
然後首頁部分一定要使用pages/index.vue這樣進來就會直接進入，雖然我們的 liff 遊戲都還是要指定網址並不影響但是還是建議首頁使用pages/index.vue
接下來把需要的頁面在pages都建立一下
關於動畫
1
yarn install @hypernym/nuxt-anime
設定方式Nuxt 官方說明
關於哪些可以使用的範本可以從官方的 DOC 這邊找到
這邊還有另外一個是單純 CSS 的可以使用
Animate.css網站
——————-以下還要慢慢補齊———————–