我們在上一篇博文中介紹了vue專案不被百度收錄的根源和介紹了兩種解決方案也具體說了預渲染的使用方法，今天說一下另一種解決方案Nuxt.js的使用，
還不了解vue為什么不被百度收錄或預渲染怎么使用的童鞋們建議點下面鏈接了解下
vue專案不被百度收錄怎么辦、seo優化問題/預渲染的具體使用
Nuxt.js介紹、Nuxt.js 是什么？：
- Nuxt.js 是一個基于 Vue.js 的通用應用框架，
- 通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染
- 我們的目標是創建一個靈活的應用框架，你可以基于它初始化新專案的基礎結構代碼，或者在已有 Node.js 專案中使用 Nuxt.js，
- Nuxt.js 預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置，
- 除此之外，我們還提供了一種命令叫：nuxt generate ，為基于 Vue.js 的應用提供生成對應的靜態站點的功能，
- 我們相信這個命令所提供的功能，是向開發集成各種微服務（Microservices）的 Web 應用邁開的新一步，
- 作為框架，Nuxt.js 為 客戶端/服務端 這種典型的應用架構模式提供了許多有用的特性，例如異步資料加載、中間件支持、布局支持等，
Nuxt.js安裝
確保安裝了npx（npx在NPM版本5.2.0默認安裝了）：
npx create-nuxt-app <專案名>
或者用yarn ：
yarn create nuxt-app <專案名>
然后會讓你進行一些安裝的選擇，這里就簡單說下（UI框架沒有就選none就行了，Eslint檢測本人是非常不習慣用的所以我一般都不選，其他的沒什么說的）
當運行完時，它將安裝所有依賴項，因此下一步是啟動專案:
cd <專案目錄>
npm run dev
應用現在運行在 http://localhost:3000 上運行，
提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目錄, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式，
說下路由配置問題：
-
Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置，
-
假設 pages 的目錄結構如下：
pages/
--| user/
-----| site.vue
--| home/
-----| blogs.vue
那么所對應的頁面路由就是：http://localhost:3000/user/site 和 http://localhost:3000/home/blogs
剩余API和方法檔案具體查閱：Nuxt.js中文檔案
預渲染具體使用方法：vue專案不被百度收錄、seo優化問題之預渲染
總結
每個框架都有他自己對應的ssr方案，今天這里提到了vue的，有心的童鞋可以自行查閱其他框架方面的
再說幾點關于seo方面的小技巧
- 多使用語意化標簽，用header，section、footer把區域模塊都劃分清楚，這樣也有利于蜘蛛爬取
- 多使用h標簽，尤其是h1，蜘蛛會認為你這是重要文案
- 經常維護自己的代碼，多優化
end~~~
如有錯誤或觀點不一致的請評論留言共同討論，本人前端小白一枚，根據自己實際專案遇到的問題進行總結分享，謝謝大家的閱讀！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/244816.html
標籤：其他
上一篇：Elasticsearch+Filebeat+Kibana搭建程序(單節點)
下一篇：Linux開山-入門篇