基於Vue的通用框架Nuxt.js

問題：最近有些朋友問我寫官網，用Vue框架實現好很差？

相信不少使用Vue的小夥伴們同樣疑惑這個問題，其實從這個問題就能夠知道你對Vue這個框架是否真的熟悉了。其實單單使用Vue這個框架來作官網的，實際上是不友好的，很是不利於SEO，抓取。由於Vue是經過把你的代碼編譯的，生成是SPA，裏面的html實際上是空的，Nuxt.js屬於SSR,也就是服務器渲染。Nuxt.js打包生成的每一個路由都會對應相對的html文件。有利於網站抓取，SEO。

Vue適合作對seo可有可無的項目，別的項目不適合，可是Nuxt.js 正好就修補了Vue的這個缺陷。

---

官方解析：

---

 

Nuxt.js環境搭建和建立啓動項目

作vue的小夥伴都知道vue-cli腳手架，其實vue-cli已經集成了nuxt.js，因此直接使用vue-cli就能夠直接構建Nuxt.js項目了。直接在須要建立項目的路徑新建文件夾，文件夾名爲項目名稱，其實就是和建立vue項目同樣。而後在該文件下打開cmd，而後運行下面cmd命令

vue init nuxt/starter

成功建立以下圖所示：

而後使用

npm install

下載依賴項，運行項目

npm run dev

此時項目已經運行成功，而且默認在3000端口打開。

瀏覽器預覽：

很高興告訴你，此時Nuxt.js項目已經建立而且啓動成功。

---

 

Nuxt.js目錄結構

assets // 資源目錄 components // 組件目錄 layouts // 佈局目錄 middleware // 中間件目錄 pages // 頁面目錄 plugins // 插件目錄 static // 靜態文件目錄 store // 狀態管理器目錄 nuxt.config.json // 個性化設置目錄 package.json // npm包管理配置目錄

 Nuxt.js經常使用配置

1.配置主機和端口號

在nuxt.config.js裏面追加下面內容

export default { server: { port: 8000, // default: 3000
    host: '217.0.0.1', // default: localhost
 }, }

 

而後npm run dev，這時候就能夠在127.0.0.1:8000端口訪問了。

2.配置全局樣式

在nuxt.config.js裏面追加下面內容

這裏聲明一下：「~」是Nuxt.js表明根目錄的標識

export default { css: ['~asstes/style.css'], }

在assets文件夾裏面建立style.css，添加內容以下：

html{ background-color: red; }

而後npm run dev，此時你能夠看到頁面所有的頁面的背景都已經變成紅色。

 Nuxt.js路由配置和傳參

在pages裏面建立news文件夾，而後在news文件夾下建立index.vue。

/pages/index.vue

<template>
  <section class="container">
    <div>
      <div>首頁</div>
      <nuxt-link :to="{name: 'news'},params:{newsId: 1}">新聞</nuxt-link>
    </div>
  </section>
</template>

<script> export default { } </script>

<style>
</style>

 /pages/news/index.vue

<template>
  <section class="container">
    <div>
        <div>新聞頁面</div>
      <nuxt-link :to="{name: 'index'}">首頁</nuxt-link>
　　　<div>新聞id:{{ $route.params.newsId}}</div> 
</div> 

</section> 
</template> 

<script> export default { } </script> 

<style> </style>

 此時即刻完成首頁和新聞業跳轉，http://localhost:3000/、http://localhost:3000/news,而且傳參。

原文出處：https://www.cnblogs.com/it-xiong/p/11208287.html