前言
最近一直沒有更新寫的文章,以前學習了一些關於vue的內容。此次嘗試了基於vue的nuxt.js框架去搭建一個webApp。中間仍是踩了不少坑。html
nuxt.js
讓咱們先來了解一下Nuxt是什麼,Nuxt 是一個更高級的框架,它構建在Vue之上。它簡化了通用或單頁Vue應用程序的開發。Nuxt.js 主要關注的是應用的UI渲染。vue
爲何要使用nuxt.js
場景:vue單頁面應用渲染是從服務器獲取所需js,在客戶端將其解析生成html掛載於id爲app的DOM元素上,這樣會存在兩大問題。git
- 因爲資源請求量大,形成網站首屏加載緩慢,不利於用戶體驗。
- 因爲頁面內容經過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 包管理配置文件)
具體的詳細用法仍是看官方文檔:點擊這裏web
我再用一段時間,有空會總結一下具體的用法。以及遇到的問題npm