nuxt web

中文| ENGLISH

nuxt-web

基於nuxtjs開發的部落格系統

項目介紹：

• 主要技術: nuxtjs 2.0 、element-ui 2.0

• 主要使用外掛： axios、 less 、 highlight.js、 component-cache

• 加qq群組一起交流：514450699

關聯項目

• 後台管理專案： vueAdmin

• 後台管理網址：http://admin.dsiab.com

• 體驗帳號： test / test

演示地址

• 官網：https: //www.dsiab.com

選擇nuxt的原因：

• nuxt開發的專案能被搜尋引擎收錄,能進行seo。

• 上手簡單，語法跟vue一致，部分寫法有差異，只需要將檔案依目錄新建好，nuxt會自動產生對應路由。

• 能正常接取統計跟廣告代碼

不足

• element-ui部分功能對搜尋引擎及seo不夠友好，部分組件需要手寫或在element-ui的基礎上做修改。例如選單部分、分頁元件都需要進行修改，因為沒有a連結, 而a連結對搜尋引擎比較友善。本專案有重寫分頁元件，方便seo,當然你也可以選擇其他元件庫或不用元件庫。

提升載入效能

• 某些時候某些介面並不需要都在服務端渲染，可以在瀏覽器渲染。例如目前首頁清單是服務端呼叫渲染，右側選單的推薦跟分類是瀏覽器渲染，也就是跟正常的ajax呼叫一樣

• 注意瀏覽器調介面需設定nginx反向代理，具體可參考：https://www.dsiab.com/post/4421

• 本專案使用@nuxtjs/component-cache 提升載入效能

如何啟動應用

 # 下载代码

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

或者

gitee: git clone https://github.com/esplori/nuxt-web.git

# 安装依赖
$ npm install
# 本地启动在 localhost:3000
$ npm run dev
# 部署到服务器，先build，再执行start启动
$ npm run build
$ npm run start
# 生成静态项目
$ npm run generate

注意

• 預設呼叫官網接口，資料跟官網同步

• 如果要使用本機接口，請修改/plugins/baseUrl.js 檔案中的baseUrl

• 如果想要在瀏覽器端呼叫接口，請修改nuxt.config.js檔案中的proxy, 將對應介面轉送至本機服務即可

感謝讚賞

創作不易，你的讚賞和認可是持續更新的動力！