項目介紹：

主要技術(shù): Nuxtjs 2.0 、ElementUI 2.0

主要使用插件： axios（請求） 、 less（css編譯） 、 highlight.js（代碼高亮） 、 @nuxtjs/component-cache （緩存）

關(guān)聯(lián)項目

后臺管理：vueAdmin ( https://gitee.com/wilkwo/vueAdmin )

演示地址

官網(wǎng)：https: //www.dsiab.com

拉取代碼后運行可看到效果（如果報錯請配置跨域），不用跑后端服務，直接調(diào)用官網(wǎng)接口。

后臺管理：

地址：http://admin.dsiab.com

測試賬號、密碼：test / test

選擇nuxt的原因：

nuxt開發(fā)的項目能被搜索引擎收錄,能進行seo。

上手簡單，語法跟vue基本一致，部分寫法有差異，只需要將文件按目錄新建好，nuxt會自動生成對應路由。

能正常接入統(tǒng)計跟廣告代碼

不足

由于Nuxt采用服務端渲染，所以影響頁面打開速度的因素很多，包括頁面內(nèi)容大小，服務器性能，網(wǎng)絡帶寬等。nuxt項目可以將頁面的主要內(nèi)容進行服務端渲染，其他不用考慮搜索引擎的的內(nèi)容可以在瀏覽器渲染，即在頁面加載完成后再進行ajax請求，這樣可以大大減少服務器壓力。

element-ui部分功能對搜索引擎及seo不夠友好，因為element-ui組件需要跳轉(zhuǎn)的鏈接都不是通過a鏈接，所以這些組件需要手寫或者在element-ui的基礎(chǔ)上做修改。比如 菜單部分、分頁組件都需要進行修改。本項目有重寫分頁組件，方便seo。

提升加載性能

某些時候某些接口并不需要都在服務端渲染，可以在瀏覽器渲染。比如目前首頁列表是服務端調(diào)用渲染，右側(cè)菜單的推薦跟分類是瀏覽器渲染，即跟正常的ajax調(diào)用一樣

注意瀏覽器調(diào)接口需要配置nginx反向代理，具體可參考：https://www.dsiab.com/post/4421

本項目使用@nuxtjs/component-cache 提升加載性能

如何啟動應用

# 下載代碼

git clone https://gitee.com/wilkwo/nuxt-web.git

# 安裝依賴$

npm install

# 本地啟動在 localhost:3000

npm run dev

# 部署到服務器，先build，再執(zhí)行start啟動

npm run build

npm run start

# 生成靜態(tài)項目

npm run generate