LinkedIn Redesign Nuxtjs3

發表於2024-01-09|更新於2024-10-29

|瀏覽量:

LinkedIn Redesign Nuxtjs3

準備Figma 設計稿

https://www.figma.com/file/7EeOLaEuMD7cNIsXTM8vp0/LinkedIn-Redesign-UI-Kit-(Community)?node-id=0%3A1&mode=dev

建立Nuxt.js 3 專案

npx nuxi@latest init nuxt-linkedIn-redesign

把每一頁透過 Builder.io 產生程式

Framework 選擇 Vue

新增 profile page 元件

1	npx nuxi add page profile

調整 app.vue 檔案

<template>
  <div>
    <NuxtPage />
  </div>
</template>

另外需要安裝 tailwindcss

成果:

http://localhost:3000/profile

專案repo:
https://github.com/gahgah147/nuxt-linkedIn-redesign

文章作者: Nalson Lai

文章連結: https://gahgah147.github.io/2024/01/09/LinkedIn-Redesign-Nuxtjs3/

版權聲明: 本部落格所有文章除特別聲明外，均採用CC BY-NC-SA 4.0 授權協議。轉載請註明來源 Nalson！

Builder.io Figma Nuxt 3 tailwindcss

相關推薦

Nuxt 3 DevTools 視覺化工具

前言這篇文章是我在 2023 iTHome 鐵人賽看到 Ryan 大大寫的 Nuxt 3 實戰筆記系列文章做的一個紀錄，我之前也都有看到發表Nuxt 相關的文章，寫得都很用心仔細很值得跟著練習，我覺得最特別的是 Nuxt 新的 DevTools功能安裝與啟用 Nuxt DevTools目前最新版的 Nuxt CLI 在建立專案時，預設已經預置並啟用了 Nuxt DevTools，你無需再另外設置，你可以透過專案下的 ./nuxt.config.ts 檔案確定，devtools.enabled 屬性是否設定為 true。 12345export default defineNuxtConfig({ devtools: { enabled: true, }}) 如果你的專案尚未啟用 Nuxt DevTools，你可以使用下列指令來為專案加入，需要注意的是 Nuxt DevTools 需要 Nuxt v3.1.0 或更高版本。 1npx nuxi@latest devtools enable 當你使用指令啟用...

Nuxt 3 使用 Nuxi 建立模板檔案

前言這篇文章是我在 2023 iTHome 鐵人賽看到 Ryan 大大寫的 Nuxt 3 實戰筆記系列文章做的一個紀錄，我之前也都有看到發表Nuxt 相關的文章，寫得都很用心仔細很值得跟著練習，我覺得最特別的是 Nuxt 新的 DevTools功能使用 nuxi 快速建立模板檔案建立檔案的指令格式如下： 1npx nuxi add <TEMPLATE> <NAME> [--cwd] [--force] 變數功能 TEMPLATE 指定要產生的檔案模板類型，目前支援專案內常會使用到的 component、page 與伺服器 api 等。 NAME 填寫檔案名稱，也可以以路徑串接，來建立子資料夾中的檔案 –cwd 指定專案起始目錄，預設為 .。 –force 如果檔案存在，強制覆蓋檔案。建立路由頁面 - nuxi add page舉個例子，建立一個 about 路由頁面： 1npx nuxi add page about 產生出的檔案 ./pages/about.vue...

Nuxt 3 實戰學習筆記 - 環境設定

前言這篇文章是我在 2023 iTHome 鐵人賽看到 Ryan 大大寫的 Nuxt 3 實戰筆記系列文章做的一個紀錄，我之前也都有看到發表Nuxt 相關的文章，寫得都很用心仔細很值得跟著練習，我覺得最特別的是 Nuxt 新的 DevTools功能 Nuxt CLI 指令nuxi 全名為 (Nuxt CLI, Nuxt Command Line Interface)，是由 Nuxt 提供開發的標準工具，Nuxt CLI 就像是 Vue CLI 可以建立 Vue 專案，我們當然也就可以使用 Nuxt CLI 來建立 Nuxt 的專案。環境準備環境準備流程如下，通常主要會用到的nuxi 指令也是這幾個清除 npx 快取建立 Nuxt 專案檢查專案相關資訊升級 Nuxt 3 版本啟動開發伺服器清除自動產生的 Nuxt 檔案和快取產生靜態網站使用的預渲染打包專案建構生產環境需要的程式包預覽網站開發工具 Nuxt DevTools 更多完整的指令與用法可以參考官方文件。清除 npx 快取 - clear-npx-cache1npx...

Nuxt3 運行在Docker 上

前言這邊在練習Nuxt 3時想要運行在Docker 上，所以就找到這篇文章將 Nuxt3 發布至 docker 中，Dockerfile 看這裡就對了實際測試可以成功，所以記錄一下過程 Dockerfile1234567891011121314151617181920212223# 使用 node 長期支援版FROM node:lts-alpine# 設定工作目錄WORKDIR /app# 複製 package.json 和 package-lock.json 至工作目錄COPY package*.json ./# 依照指定版本安裝依賴RUN npm ci# 複製所有COPY . .# 建立生產版本RUN npm run build# 暴露的連接埠EXPOSE 3000# 啟動應用程式CMD ["node", ".output/server/index.mjs"] 打包1docker build -t my-nuxt-app . 啟動1docker run -d --name nuxt-app -p 3000:3000...

評論

ValineDisqus

資料載入中