基於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,並且傳參。