Nuxt

作者資料

原始 MD by 智遠

AI 圖片模型

civitai
EasyNegative

---

今天的課程內容比較特別

---

你們自己要看文件 然後有問題都可以問我

---

別擔心Nuxt的文件初期都十分直觀

---

先安裝 Nuxt

---

又是框架?._.

---

為何使用網頁框架

---

快速熟悉當前語言在特定使用場景 的成熟開發模式

---

Nxut特色 約定式開發 Based on the directory structure 約定文件大於配置 省去配置的選擇障礙

---

最直觀的例子就是:

• 組件的配置
• router配置

---

在 Vue3 使用組件

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

---

在 Nuxt3 使用組件 Components Directory

---

在 Vue3 使用 Router

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

---

在 Nuxt3 使用 Router Pages Directory

---

聽下來覺得框架很好用 所以之後開發都用框架? (之後說說框架的隱藏缺陷)

---

為何不使用框架

---

開發的思維會被框架限制住 只適合特定應用(for web)

---

以及軟體的結構越大

• 出問題就...越難回歸源頭
• 啟動速度巨慢
• 有時動態載入不靈光...

---

還有時間的話...

---

使用第三方組件庫 Element-plus for Nuxt

---

嘗試用Nuxt搭配element-plus做出一個網站頁面