Nuxt

版本:nuxt 2.15.8

前情提要一下,在 Vue 的專案下,常會需要做父子元件或是頁面之間的溝通傳值,如果說只是單層(ex:父元件 → 子元件、子元件 → 父元件、頁面 → 頁面),我們可以很簡單的使用 propsemitevent bus 即可,但在大型專案,共用資料就不是如此單純,可能會有元件內含元件、多層級的溝通,如果只用上述方法,對於開發及除錯都不便利,如下圖範例,元件 1-1元件 2-1 的溝通相對複雜。

閱讀更多

版本:nuxt 2.15.8

全名為 Nuxt configuration file,功能同 Vue 專案內 vue.config.js 檔,如果我們使用 create-nuxt-app 來建置專案,會自動產生這支檔案,在此配置的內容,會全域讀取設定。

接下來介紹一下一些常用的設定:

閱讀更多

版本:nuxt 2.15.8

使用 create-nuxt-app 安裝完成後,可以看到以下的資料夾結構:

assets, layouts, middleware, mixins, plugins 以上資料夾在當前版本是需要手動建置的,

依照順序介紹各資料夾功能:

閱讀更多

版本:nuxt 2.15.8

說到 Nuxt,必須先從 Vue.js 說起,Vue.js 為專注在視圖層(View) 的 JS 框架,為 SPA(Single Page Application)應用程式,簡而言之整個網站應用只有單一頁面,一但頁面被加載進來後,就不會再進行該頁面請求,由於 Vue 是利用 JS 載入資料,並動態產生元件,SEO 只能抓取到 HTML 內容,因此 SEO 表現趨近於零。

而 Nuxt 是基於 Vue.js、Node.js、Webpack 以及 Badel.js 的輕量框架,可以同時創建 SSR(Server Side Render)及 SPA,在頁面載入前即渲染(伺服器回傳完整 HTML 檔,每次跳轉頁面,瀏覽器都需要刷新),搜尋引擎爬蟲可以取得資料,大幅解決 SEO 的問題。

以下圖片說明:

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×