nuxt初識

前言

---

最近一直沒有更新寫的文章，以前學習了一些關於vue的內容。此次嘗試了基於vue的nuxt.js框架去搭建一個webApp。中間仍是踩了不少坑。

nuxt.js

讓咱們先來了解一下Nuxt是什麼，Nuxt 是一個更高級的框架，它構建在Vue之上。它簡化了通用或單頁Vue應用程序的開發。Nuxt.js 主要關注的是應用的UI渲染。

爲何要使用nuxt.js

場景：vue單頁面應用渲染是從服務器獲取所需js，在客戶端將其解析生成html掛載於id爲app的DOM元素上，這樣會存在兩大問題。

1. 因爲資源請求量大，形成網站首屏加載緩慢，不利於用戶體驗。
2. 因爲頁面內容經過js插入，對於內容性網站來講，搜索引擎沒法抓取網站內容，不利於seo。

nuxt 項目結構

• .nuxt (Nuxt自動生成，臨時的用於編輯的文件，build)
• assets (用於組織未編譯的靜態資源如LESS、SASS或JavaScript)
• components (用於本身編寫的Vue組件，好比波動組件、日曆組件、分頁組件)
• layouts (佈局目錄，用於組織應用的佈局組件，不可更改)
• middleware (用於存放中間件)
• pages (用於存放寫的頁面，咱們主要的工做區域)
• plugins (用於存放JavaScript插件的地方)
• static (用於存放靜態資源文件，好比圖片)
• store (用於組織應用的Vuex 狀態管理)
• .editorconfig (開發工具格式配置)
• .eslintrc.js (ESLint的配置文件，用於檢查代碼格式)
• .gitignore (配置git不上傳的文件)
• nuxt.config.json (用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置)
• package-lock.json (npm自動生成，用於幫助package的統一設置的，yarn也有相同的操做)
• package.json (npm 包管理配置文件)

具體的詳細用法仍是看官方文檔：點擊這裏

我再用一段時間，有空會總結一下具體的用法。以及遇到的問題