iT邦幫忙

nuxt.js相關文章
共有 95 則文章
鐵人賽 Modern Web DAY 9

技術 九號坑,偽裝vscode介面建起來-sidebar

今天就先把基本的介面框框弄起來! 先看結果: 如果問我說,左邊那些icon跟下面的terminal是幹嘛的,我只能告訴你,完全沒用阿哈哈哈哈哈哈目前沒想到可以...

鐵人賽 Vue.js DAY 6

技術 D6:Nuxt 3.x Pages 目錄-自動生成路由

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Pages 資料夾用來新增頁面,當我們在 Pages 資料夾建立檔案,Nuxt 會根據資料夾以及檔...

鐵人賽 Modern Web DAY 7

技術 七號坑,架起編輯器聊天室的筋骨,關於Nuxt Layout使用

先讓我們來看一下vscode的畫面 畫面架構 主要結構就是橘色的sidebar、綠色的聊天視窗跟紫色的Terminal輸入區。 sidebar會固定在瀏覽器左...

鐵人賽 Vue.js DAY 3

技術 D3:Nuxt 3.x 目錄結構 Directory Structure

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 定義了完整的目錄規則,讓我們可以輕鬆配置功能,專注在開發上 透過 npx nuxi@l...

技術 Nuxt3 使用紀錄 - 使用 mkcert 讓本機開發也可以有 https

真的超簡單~ 要有這流程,主要是拿來測試串接 Facebook sdk、Apple rest api 等等使用。因為我是用 Mac 電腦,所以使用 Mac 安裝...

鐵人賽 Modern Web DAY 30

技術 Day NaN. 完賽心得

過去這 30 天算是將小弟近期的學習跟 coding 經驗做個紀錄,很感謝推我入坑的學長兼前輩,對於他每天都幫忙校稿 (我的錯字真是無敵多... 汗顏) 提供意...

鐵人賽 Modern Web DAY 19

技術 十九號坑,實現簡陋單一聊天室

在開始今天的主題之前,先確認一下router有沒有設好,上一篇應該在送出名稱之後就會切換到localhost:3000/chat這個網址~ 再來還要把原本在pa...

鐵人賽 Modern Web DAY 5

技術 五號坑,造個路vue-router送你到各地

先來造個路吧!使用vue-router設定從網址下不一樣的內容走到對應的頁面。 我們先在pages資料夾內新增一個檔案夾叫做chat,並增加一支index.vu...

鐵人賽 Modern Web DAY 10

技術 十號坑,終於做首頁啦~

今天來做右半邊先處理一下layouts > default裡的maincss加上 .main { padding-left: 200px; //...

鐵人賽 Modern Web DAY 20

技術 二十號坑,設計對話腳本與component

今天要做的對話腳本結果 基本上,即時連線的機制已經做出來了,就算看起來像在亂寫,後面大部分就是在做一些小設計,讓聊天室偽裝的更像vscode 今天我們就來...

鐵人賽 Vue.js DAY 18

技術 D18:Nuxt 3.x 搭配 CSS Framework-以 Bootstrap 5 為例

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Bootstrap 版本:v5.3.1Sass 版本:v1.63.6 在 Nuxt 專案中,我...

鐵人賽 Vue.js DAY 15

技術 D15:Nuxt 3.x Server API 整合 MongoDB 實作,邁向全端第一步

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 搭配了新的伺服器引擎 Nitro,讓我們能輕鬆建立 Server API,並在 Nu...

鐵人賽 Vue.js DAY 24

技術 D24:Nuxt 3.x 套件應用-VeeValidate v4.x 表單驗證

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 vee-validate 是使用於 Vue.js 的輕量表單驗證套件(參考 php 框架 lar...

鐵人賽 Vue.js DAY 2

技術 D2:Nuxt 3.x 專案架設

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt 版本:v3.7.1 在 Vue 3 出了好一段時間後,Nuxt 3 終於在 202...

鐵人賽 Modern Web DAY 16

技術 十六號坑,匿名登入

login的事件通知 先處理server端的socket 監聽一個login事件 const SocketIO = require('socket.io')...

鐵人賽 Vue.js DAY 5

技術 D5:Nuxt 3.x Stylelint SCSS 程式碼檢查與自動排版

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 前一天介紹了 Nuxt3 搭配 ESLint JavaScript 程式碼檢查工具:文章連結,本...

鐵人賽 Vue.js DAY 28

技術 D28:Nuxt 3.x 將靜態網站部署到 GitHub Pages

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 專案開發完成後,終於到最後一步 「部署」,本篇將說明靜態網站生成(SSG),搭配 GitHub P...

鐵人賽 Vue.js DAY 4

技術 D4:Nuxt 3.x ESLint 程式碼規範與自動排版-搭配 TypeScript

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt 3 完整支援 TypeScript 開發,TypeScript 相關設定在專案根目錄...

鐵人賽 Vue.js DAY 10

技術 D10:Nuxt 3.x Plugins 目錄-搭配第三方套件

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Plugins 目錄協助我們在 Nuxt 擴充套件功能。前端開發常會搭配 第三方套件(packag...

鐵人賽 Vue.js DAY 14

技術 D14:Nuxt 3.x Server 目錄-建立 API

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 搭配了新的伺服器引擎 Nitro,讓我們能輕鬆建立 Server API,並在 Nux...

鐵人賽 Vue.js DAY 29

技術 D29:Nuxt 3.x Universal(SSR)專案部署到 Firebase

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 專案開發完成後,終於到最後一步 「部署」,本篇將說明 Universal 專案部署到 Fireba...

鐵人賽 Vue.js DAY 23

技術 D23:Nuxt 3.x 替網站增加 Sitemap 網站地圖

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Sitemap 是一種用來提供網站資訊的檔案,記錄網站內的網頁、圖片等,主要功用為協助搜尋引擎快速...

鐵人賽 Vue.js DAY 11

技術 D11:Nuxt 3.x Middleware 目錄-監聽路由變化

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Middleware 為 Nuxt 內的 路由守衛(Navigation Guards),相當於...

鐵人賽 Vue.js DAY 22

技術 D22:Nuxt 3.x 導入 I18n 實作多國語系

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 @nuxtjs/i18n 版本:v8.0.0-rc.3 多國語系讓我們的網站邁向國際市場,本...

鐵人賽 Vue.js DAY 17

技術 D17:Nuxt 3.x 自訂 Loading 效果

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 提供了預設進度條元件 <NuxtLoadingIndicator>,在路...

鐵人賽 Vue.js DAY 16

技術 D16:Nuxt 3.x Meta Tags 與 SEO 搜尋引擎優化

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 搭配 Unhead 套件,讓我們可以在專案內動態控制 <head> 標籤...

鐵人賽 Vue.js DAY 19

技術 D19:Nuxt 3.x 狀態管理 State Management (1)-useState

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 專案開發過程中常會有狀態共享的需求。父子元件間資料傳遞可以使用 Props 和 $emit,或是...

鐵人賽 Vue.js DAY 30

技術 D30:Nuxt 3.x 筆記:總結與感想

終於來到最後一天~今天不談技術,決定來分享一下參賽原因與總結這次的系列文內容。 總結 本次系列文概念以從頭到尾實作一個 Nuxt3 專案為主題,每一篇都有範例...

鐵人賽 Vue.js DAY 9

技術 D9:Nuxt 3.x Composables vs Utils 目錄-自訂共用方法

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 定義在 composables 以及 utils 資料夾的檔案 Nuxt 都會自動引入(auto-...

鐵人賽 Vue.js DAY 20

技術 D20:Nuxt 3.x 狀態管理 State Management (2)-Pinia

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 專案開發過程中常會有狀態共享的需求。昨天介紹了 Nuxt3 useState Composabl...