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 檔案

1
2
3
4
5

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

:::info

另外需要安裝 tailwindcss
:::

成果:

http://localhost:3000/profile

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