用 Vue TailwindCSS 時,變數 class 沒有作用

問題

假設想把 TailwindCSS 的 class 改用變數顯示:

HTML

npm run dev 之後,會發現這個 class 沒有作用,簡單來說跟渲染的順序有關,Tailwind CSS 以為這些 class 沒有用到就把它刪除了。

解決方法

解決方法是把相關的 class 加到 safelist 清單下,打開 tailwind.config.js 後,輸入以下語法 (我用的是 TailwindCSS 3.0,如果你用的是 2.0,寫法會不太一樣,可以參考 TailwindCSS 2.0 的文件。)

JS

以上。

如此就可以解決變數 class 沒有作用的問題囉。

區網連線下,用手機觀看 Nuxt.js 開發的專案

  • 日期:
  • 留言數:0
  • 標籤:

網站如果要測手機版,我通常是直接用手機連自己的電腦 IP,用實際的載具去測試才準確。

如果是用 Nuxt.js 開發的專案,需要加一些設定才可以用手機連電腦 IP 喔!這邊從頭開始一步一步跟大家分享:

修改 host 設定

Nuxt.js 的專案預設為 localhost,所以我們要先修改他的 host 設定。

開啟 package.json,輸入以下資訊:

JSON
package.json

重跑一次專案

接著 ctrl + c 停止編譯專案,再 npm run dev 一次,可以看到 Terminal 的 Nuxt Listening 位置變成了你的電腦 IP:

接著用手機輸入 Listening 的這一串網址(需包含 port),就可以用手機測試行動版囉!

注意:

1. 電腦跟手機必須連同一個 wifi
2. 電腦必須要為開機狀態,而且該專案必須在執行環境下

將 Nuxt.js 串接的資料改寫成多國語系

書接上回

上次提到如何用 Nuxt.js 串接 data 做下拉式選單,接下來會繼續沿用該資料,並將之改寫為多國語系。

安裝 i18n

先來 i18n 一下:

Shell

在 nuxt.config.js 設定 i18n 的資料:

JS
nuxt.config.js

你可能會看到另外一種寫法,是直接在 nuxt.config.js 設定語系的資料夾和檔案:

JS
nuxt.config.js

但我的語系拆的很細,一個 component 會載入一個語系,所以會將語法寫在 components 檔案中。

準備語系檔

參考上一篇 navData 的資料,將他複製起來另存為 json 檔 (格式記得改一下):

JSON
tw/nav.json

記得 en 的語系也要準備喔。

改接多國語系

打開 navBar.vue,將之前寫的 fethData 整個刪除,然後加入 i18n 的設定:

JS
navBar.vue

接下來在 computed 裡,把 i18n 的語系檔寫回 navData

JS
navBar.vue

取名為 navData 是因為之前的 data 宣告了 navData 這個物件,因此只要修改 js code 即可,不用改上方 template 的 v-for 載入的資料,他會自動對接。

原則上到這一步,就可以看到資料囉,此時接的就是多國語系 json 的檔案。

可以做個簡單的切換看看效果:

HTML
navBar.vue

以上,是我目前使用 Nuxt.js 串接多國語系的方法,如果有更好或更簡單的方法,也歡迎分享給我唷,感謝。

用 Nuxt.js 串接 data 做下拉式選單

用 Vue-cli 一陣子後,因為有 SEO 的需求,所以決定改用 Nuxt.js。

雖然 Vue-cli 也有套件 prerender-spa-plugin 可以做到預渲染的功能,但他無法預渲染動態路由,像是 /user/:id 這樣的路徑,因為預渲染是獲取已在的元素,但動態路由的元素狀態處於未知,所以無法取得對應的內容。當然,假使你的 Vue 專案都是靜態網頁,而且你也較熟悉 Vue-cli,那可以考慮用該套件即可,不需改用 Nuxt.js。


fetch 與 asyncData 的選擇

我們以往都是用 data() 存取資料,但 Nuxt.js 多了一個 asyncData 的選擇,將資料放在 asyncData 底下以達到從伺服器端渲染頁面的效果,可以改寫如下:

JS
navBar.vue

頁面渲染前會執行 asyncData(),並將值塞回 data() 內,詳細內容可參考官網的 asyncData() 介紹

asyncData() 使用注意

asyncData() 雖然看似好用,卻只能在 pages/ 資料夾底下的 *.vue 才有作用,如果你的 vue 檔案是放在 components/ layouts/ 底下,是無法利用 asyncData() 存取資料的。

因此,可以改用 fetch 存取 components/layouts/ 裡的資料,改寫如下:

JS
navBar.vue

不過有看過一種說法是,asyncData() 適合用在覆蓋 data() 的資料上,fetch 則適合用在 vuex 上。所以我也不知道自己這樣寫是否有符合規範,如果有更好的方法歡迎留言給我!


製作下拉選單

這邊搭配 Bootstrap v5 來製作下拉選單,使用的是上方寫到的 navDatas[] 資料。我製作的是二層的下拉式選單 (dropdown menu),所以有比較多針對 class 的判斷式。

HTML
navBar.vue

以上。


後記

這篇不是教學,比較像是我寫 code 的筆記,因為對 Nuxt.js 不熟,很多觀念還沒有從頭看懂,所以也不敢亂教大家 XD。

後來因為有再搭配多國語系做選單,所以最後沒有使用 fetch 的方式產資料,有興趣的朋友可以參考看看:將 Nuxt.js 串接的資料改寫成多國語系

用 VUE + EXPRESS + 建置前後端網站

最近想要重置自己的履歷介紹,並將專案整理後放上來。

因為有的專案會用到跨域的 API,為了解決這個問題,就考慮要自己弄個後端 SERVER 來處理跨域問題,因此這次改版決定將 Vue 和 Express 通通整合進來,並將步驟記錄下來以供日後參考使用。

使用套件

預計會使用的套件如下:

  • VUE v2
  • Vue-Cli
  • Webpack
  • Axios
  • Node
  • Express
  • Cors
  • Nodemon

網站結構

我會將 Express 放在 Vue 專案底下,因此結構目錄大概長這樣:

Plain Text

安裝 Vue

使用 Webpack 建立專案

首先,用 Webpack 安裝 Vue-cli,可以自行修改細部的設定,也可以使用「Enter」大法一直按下一步,直到安裝完成。

Shell

安裝 Axios 套件

先安裝 Axios 套件

Shell

再打開 src/main.js 引入 axios

JS
src/main.js

使用 Axios

打開 vue 預設的檔案 HelloWorld.vue,將我們預先設計好的 api 寫進來。這邊用了兩個 function get & post API:getmsg() 以及 postmsg(),剩下的 API Router 設定會在 Express 完成。

HTML
components/HelloWorld.vue
JS
components/HelloWorld.vue

弄好之後可以先看一下畫面,使用指令 npm run dev,畫面如下所示:

前端 Vue 預設的 port 為:http://localhost:8080


安裝 Express

安裝 Express 產生器

第一次使用要先安裝他的產生器:

Shell

建立 Express 專案

Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」,如果都沒有指定,預設就是:

  • 樣版引擎:jade
  • CSS 預處理器:原生的 css

我自己是習慣使用 ejs 跟 scss,所以我會下這樣的指令新建專案:

Shell

後端預設的 port 為 http://localhost:3000,畫面如下:

設定 Router

接著在 server/routes/index.js 設定 router

JS

使用 nodemon 自動重啟伺服器

nodemon 可以說是後端的 livereload。我們更改 server 端的程式碼後,不用關閉伺服器再打開,直接重新整理網頁即可,非常的方便!

先在 server 資料夾底下安裝 nodemon:

Shell

然後打開 app.js,將最後一行註釋起來

JS
server/app.js

並加入以下程式碼:

JS
server/app.js

接著再啟動 nodemon:

Shell

這樣每次存檔後,就可以到網頁上看結果,不需要重啟伺服器了。

安裝 Cross-env 跨平台設定環境

corss-env 這個套件可以讓我們跨平台的將環境設定好,讓 MAC / Linux / Windows 的環境一致。

Shell

打開 server/package.json,將 script 設定全部替換掉:

JSON
server/package.json

安裝 Cors 解決跨域問題

最後就是要解決前端跟後端的跨域問題了,先安裝 cors 套件:

Shell

然後在 server/app.js 裡,加入以下語法來設定跨域:

JS
server/app.js

開啟前端 Vue 的檔案設定 proxy,詳細位置為 portfolio/config/index.js

JS
config/index.js

最後重啟伺服器:

Shell

在網址輸入 http://localhost:8080 後,打開 console 視窗,試著點選 getpost 兩個按鈕,應該可以成功看到 api 資訊

到此為止,Vue 和 Express 的開發環境就算是設定完成了,我們可以在 Express 設定 API router,然後用 Vue 開發時接入 API。

使用 Express 部署 Vue 專案

最後,我希望用 Vue build 出來的專案(dist/index.html),可以在 Express 底下執行並順利接 API,完成我的一條龍計畫!

先安裝 connect-history-api-fallback 套件,這個套件是用來溝通前端和後端的中間層。

Shell

打開 server/app.js 修改 Express 的 router:

JS
server/app.js

打開 routes/index.js

JS
routes/index.js

回到前端將專案 build 出來

Shell

再打開後端的 http://localhost:3000,就可以執行我們最後 build 出來的專案囉,而且也可以順利執行 API:

最後就可以愉快地開始寫網站囉!!


在 Vue 框架下使用所有的 Font Awesome icon

如果想在 Vue 使用 Font Awesome,可以參考官方的 Github 文件

JS
src/main.js
JS
src/App.vue

但是官方給的範例是「你要用哪一個 icon,就匯入哪一個 icon」,所以我們只能使用 user-secret 這個 icon,假設要使用兩個以上的 icon,就必須一直匯入,非常的麻煩。

使用 Font Awesome 所有 icon

如果你希望在 Vue 裡可以一次匯入所有 icon,不需要個別匯入的話,可以改用以下寫法:

JS
src/main.js

這邊的 fas 指的是所有的 solid icon,更多種類請參考:

fas:Solid
far:Regular
fal:Light
fab:Brands

如此一來,不需要個別匯入就可以使用所有的 Font Awesome icon 囉!

讓 CSS 讀取 vue i18n 的語系並顯示對應的樣式

如果網站有多語系的需求,除了修改文字之外,有可能還需要根據不同的語系,調整對應的 CSS 樣式。

通常會碰到以下兩種情況:

  • 不同的語系有不同的色彩 / 樣式 / 或排版
  • 不同的語系有不同的寬度 (因為有的語系文字特別長)

我們可以直接用this.$i18n.locale 抓出當前的語系名稱,然後直接用這個語系名稱當做 CSS 的 class 即可。

詳細的程式碼如下:

JS

而 i18n 的語系名稱是怎麼來的呢?預設位置在 lang/index.js 裡:

JS

這裡的 en_US 以及 zh_TW 就是他的語系名稱,我們可以依照需求自行調整。

建立 Vue Cli 3 專案的設定介紹

  • 日期:
  • 留言數:0
  • 標籤:

Vue Cli 可以快速幫 Vue 建立一個完整的系統,但每次建立都有一些設定要調整,為了怕自己忘記,所以簡單將設定紀錄一下~

設定範例圖

如果有人被 google 搜尋騙進來,可以先看一下這篇文章講的東西是不是你想知道的!

▼ 我要分享的是這個設定而已 XD


vue create 建立專案後,會出現以下的設定:

Please pick a preset

第一個是讓你選擇專案的環境配置:

  • default(babel, eslint): 預設的新專案原型,沒有任何 npm,選擇之後會直接幫你建立專案,後面的都可以略過了 XD。
  • Manually select features: 如果希望全部設定都自己手動選擇,就請選這個吧。

如果在建立專案時有儲存設定,未來建新專案時可以在這裡選擇過往的設定,要如何「儲存設定」?這個部分會在後面提到。

Check the features needed for your project

接著選擇在這個專案中會用到的功能,用space多選。

  • Babel: JavaScript 轉碼器,可以將 ES6 的程式碼轉為 ES5
  • TypeSript: TypeScript 用來補足 JavaScript 在型別上的不足,他有可選的靜態型別,以及支援最新的 ES6 特性
  • Progressive Web App (PWA) Support: 是否支援漸進式網頁應用 (PWA)
  • Router: Vue 的路由器,可以參考 vue-router
  • Vuex: Vue 的狀態管理模式,可以參考 vuex
  • CSS Pre-processors: CSS 的預處理器,例如 Less, Sass
  • Linter / Formatter: 檢查 Coding Style 與格式化,例如 ESlint
  • Unit Testing: 單元測試
  • E2E Testing: End to End 測試

想要更瞭解單元測試與 E2E 測試的朋友,可以參考保哥的文章介紹:一次搞懂單元測試、整合測試、端對端測試之間的差異

承上,選好功能後,部分的功能會再詢問更細部的設定。

如果你選了 TypeScript

  • Use class-style component syntax: 是否要使用 style component 的語法
  • Use Babel alongside TypeScript: 是否要用 Babel 轉譯

如果你選了 Router

如果你選了 CSS Pre-processors

  • Pick a CSS pre-processor: 選擇你要用的 CSS 預處理器

如果你選了 Linter / Formatter

  • Pick a linter / formatter config: 選擇 Coding Style 的規範類型。
  • Pick additional lint features: 檢查 Coding Style 時,是要在存檔時檢查?還是 commit 時直接處理?

如果你選了 Unit /E2E Testing

  • Pick a unit testing solution: 選擇單元測試的測試方法
  • Pick a E2E testing solution: 選擇 E2E 測試的測試方法
  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.: 選擇 Babel, PosCSS, ESLint… 等這些設定檔的存放位置

最後一個選項,則是問你要不要保留以上的設定,下次如果要新建一個 Vue Cli 時,就可以直接拿來使用。