Nuxt

時間  2019-11-20
標籤 nuxt 简体版
原文   原文鏈接

一.Nuxt概念css

　　Nuxt.js簡單的說是Vue.js的通用框架，最經常使用的就是用來做SSR（服務器端渲染）。html

二.Nuxt優勢vue

  • 基於 Vue.js
  • 自動代碼分層
  • 服務端渲染
  • 強大的路由功能，支持異步數據
  • 靜態文件服務
  • ES6/ES7 語法支持
  • 打包和壓縮 JS 和 CSS
  • HTML頭部標籤管理
  • 本地開發支持熱加載
  • 集成ESLint
  • 支持各類樣式預處理器： SASS、LESS、 Stylus等等

三 .SSRnode

　　1.概念：SSR，即服務器渲染，就是在服務器端將對Vue頁面進行渲染生成html文件，將html頁面傳遞給瀏覽器。webpack

　　2.SSR優勢：ios

　　　　<1>有利於搜索引擎的SEO操做。SPA的HTML只有一個無實際內容的HTML和一個app.js，SSR生成的HTML是有內容的，這讓搜索引擎可以索引到頁面內容。git

　　　　<2>更快內容到達時間。傳統的SPA應用是將bundle.js從服務器獲取，而後在客戶端解析並掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。github

四.nuxt.js的安裝web

　　1.確保已經安裝Node到系統中。vue-cli

　　2.用npm來安裝vue-cli這個框架，若是你已經安裝過了，能夠省略這步。　　

npm install vue-cli -g

　　安裝完成後可使用vue -V 來測試是否安裝成功。（注意：這裏要使用大寫的V，小寫無效）。

　　3.使用vue安裝 nuxt

　　安裝好vue-cli後，就可使用init命令來初始化Nuxt.js項目。

vue init nuxt/starter

　　這時候他會在github上下載模版，而後會詢問你項目的名稱叫什麼，做者什麼的，這些徹底能夠根據本身的愛好填寫。

　　4.使用npm install安裝依賴包

npm install

　　這個過程是要等一會的，若是你這個過程安裝失敗，也不要慌張，你能夠直接誒刪除項目中的node_modules文件夾後，從新npm install進行安裝。

　　5.使用npm run dev 啓動服務

 npm run dev 

　　6.在瀏覽器輸入 localhost:3000,能夠看到結果。

五.Nuxt項目目錄

|-- .nuxt                            // Nuxt自動生成，臨時的用於編輯的文件，build
|-- assets                           // 用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
|-- components                       // 用於本身編寫的Vue組件，好比滾動組件，日曆組件，分頁組件
|-- layouts                          // 佈局目錄，用於組織應用的佈局組件，不可更改。
|-- middleware                       // 用於存放中間件
|-- pages                            // 用於存放寫的頁面，咱們主要的工做區域
|-- plugins                          // 用於存放JavaScript插件的地方
|-- static                           // 用於存放靜態資源文件，好比圖片
|-- store                            // 用於組織應用的Vuex 狀態管理。
|-- .editorconfig                    // 開發工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用於檢查代碼格式
|-- .gitignore                       // 配置git不上傳的文件
|-- nuxt.config.json                 // 用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操做
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操做
|-- package.json                     // npm包管理配置文件

 六.Nuxt經常使用配置項

　　1.配置IP和端口：

　　/package.json

 "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

　　2.配置全局CSS

　　/assets/css/normailze.css

html{
    color:red;
}

　　/nuxt.config.js

 css:['~assets/css/normailze.css'],

　　3.配置webpack的loader

　　在nuxt.config.js裏是能夠對webpack的基本配置進行覆蓋的

　　eg：配置一個url-loader來進行小圖片的64位打包（在nuxt.config.js的build選項裏進行配置。）

build: {
 
    loaders:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:"url-loader",
        query:{
          limit:10000,
          name:'img/[name].[hash].[ext]'
        }
      }
    ],
 
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }

 

七.Nuxt的路由配置和參數傳遞

　　1.路由能夠體現咱們的業務邏輯，把模塊串聯起來，讓程序煥發光彩。

　　eg：簡單路由Demo

　　在根目錄的pages文件下新建兩個文件夾，about和news

　　在about文件夾下新建index.vue文件，並寫入下面的代碼：

<template>
  <div>
      <h2>About Index page</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

　　在news文件夾下新建index.vue文件，並寫入下面的代碼：

<template>
  <div>
      <h2>News Index page</h2>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

 

　　修改原來的pages文件夾下的index.vue，刪除沒用的代碼，寫入下面連接代碼：

<template>
  <div>
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about">ABOUT</a></li>
      <li><a href="/news">NEWS</a></li>
    </ul>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>
 
</style>

　　這個小例子做完，你會發現這一切太簡單了，由於Nuxt.js都爲咱們做好了，不用寫任何配置代碼。

　　2.<nuxt-link>標籤

　　雖然上面的例子跳轉已經成功，可是Nuxt.js並不推薦這種<a>標籤的做法，它爲咱們準備了<nuxt-link>標籤（vue中叫組件）。咱們先把首頁的<a>標籤替換成<nuxt-link>。

　　修改index.vue

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
      <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
      <li><nuxt-link :to="{name:'news'}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>
 
</style>

 

      咱們再次預覽頁面，也是能夠進行正常跳轉的，在實際開發中儘可能使用<nuxt-link>標籤的方法跳轉路由。

　　3.params傳遞參數

　　路由常常須要傳遞參數，咱們能夠簡單的使用params來進行傳遞參數，咱們如今向新聞頁面（news）傳遞個參數，而後在新聞頁面進行簡單的接收。

　　咱們先修改pages下的Index.vue文件，給新聞的跳轉加上params參數，傳遞newsid=3306。

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
      <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
      <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>
 
</style>

　　在news文件夾下的index.vue裏用$route.params.newsId進行接收，代碼以下。

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

 

　　4.Nuxt的動態路由和參數校驗

　　簡單的路由已經弄清楚了，這節看一下動態路由，其實動態路由就是帶參數的路由。好比咱們如今新聞模塊下面有不少新聞詳細頁，這時候就須要動態路由的幫助了。

　　新聞詳細頁面：

　　我在news文件夾下面新建了_id.vue的文件，如下畫線爲前綴的Vue文件就是動態路由，而後在文件裏邊有 $route.params.id來接收參數。

　　/pages/news/_id.vue

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

　　修改新聞首頁路由

　　咱們在/pages/news/index.vue進行修改，增長兩個詳細頁的路由News-1和News-2。

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/news/123">News-1</a></li>
        <li><a href="/news/456">News-2</a></li>
      </ul>
  </div>
</template>

　　代碼寫好後，打開npm run dev 進行查看，咱們已經進入了新聞詳細頁，並在詳細頁中取得了傳遞過來的新聞ID。

　　動態參數校驗

　　進入一個頁面，對參數傳遞的正確性校驗是必須的，Nuxt.js也貼心的爲咱們準備了校驗方法validate( )。

　　/pages/news/_id.vue

export default {
 
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
 
}

　　咱們使用了validate方法，並把params傳遞進去，而後用正則進行了校驗，若是正則返回了true正常進入頁面，若是返回false進入404頁面。

　　5.Nuxt的路由動畫效果

　　路由的動畫效果，也叫做頁面的更換效果。Nuxt.js提供兩種方法爲路由提供動畫效果，一種是全局的，一種是針對單獨頁面製做。

　　全局路由動畫

　　全局動畫默認使用page來進行設置，例如如今咱們爲每一個頁面都設置一個進入和退出時的漸隱漸現的效果。咱們能夠先在根目錄的assets/css下創建一個main.css文件。

　　/assets/css/main.css(沒有請自行創建)

.page-enter-active, .page-leave-active {
    transition: opacity 2s;
}
.page-enter, .page-leave-active {
    opacity: 0;
}

　　而後在nuxt.config.js里加入一個全局的css文件就能夠了。

 css:['assets/css/main.css'],

　　這時候在頁面切換的時候就會有2秒鐘的動畫切換效果了，可是你會發現一些頁面是沒有效果的，這是由於你沒有是<nuxt-link>組件來製做跳轉連接。你須要進行更改。

　　/pages/news/index.vue

<li><nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link></li>

 

　　單獨設置頁面動效

　　想給一個頁面單獨設置特殊的效果時，咱們只要在css裏改變默認的page，而後在頁面組件的配置中加入transition字段便可。例如，咱們想給about頁面加入一個字體放大而後縮小的效果，其餘頁面沒有這個效果。

在全局樣式assets/main.css 中添加如下內容。

.test-enter-active, .test-leave-active {
    transition: all 2s;
    font-size:12px;
    
}
.test-enter, .test-leave-active {
    opacity: 0;
    font-size:40px;
}

　　而後在about/index.vue組件中設置

export default {
  transition:'test'
}

 

　　6.Nuxt的默認模版和默認佈局

　　在開發應用時，常常會用到一些公用的元素，好比網頁的標題是同樣的，每一個頁面都是如出一轍的標題。這時候咱們有兩種方法，第一種方法是做一個公用的組件出來，第二種方法是修改默認模版。這兩種方法各有利弊，好比公用組件更加靈活，可是每次都須要本身手動引入；模版比較方便，可是隻能每一個頁面都引入。這節課咱們就學習一下如何使用Nuxt的默認模版和默認佈局功能。　　

　　<1>默認模板

　　Nuxt爲咱們提供了超簡單的默認模版訂製方法，只要在根目錄下建立一個app.html就能夠實現了。如今咱們但願每一個頁面的最上邊都加入「菜鳥的逆襲」 這幾個字，咱們就可使用默認模版來完成。

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>菜鳥的逆襲</p>
    {{ APP }}
</body>
</html>

 

　　這裏的{{ HEAD }}讀取的是nuxt.config.js裏的信息，{{APP}} 就是咱們寫的pages文件夾下的主體頁面了。須要注意的是HEAD和APP都須要大寫，若是小寫會報錯的。

　　這裏還有一個小坑須要你們注意，就是若是你創建了默認模板後，記得要重啓服務器，不然你的顯示不會成功；可是默認佈局是不用重啓服務器的。

　　<2>默認佈局

　　和默認模板相似的功能還有默認佈局，可是從名字上你就能夠看出來，默認佈局主要針對於頁面的統一佈局使用。它在位置根目錄下的layouts/default.vue。須要注意的是在默認佈局裏不要加入頭部信息，只是關於<template>標籤下的內容統一訂製。

　　仍是上邊的需求，咱們在每一個頁面的最頂部放入「我巢226最棒～」 這幾個字，看一下在默認佈局裏的實現。

這裏的<nuxt/>就至關於咱們每一個頁面的內容，你也能夠把一些通用樣式放入這個默認佈局裏，可是我的不建議這樣寫，會增長頁面的複雜程度。

　　總結：要區分默認模版和默認佈局的區別，模版能夠訂製不少頭部信息，包括IE版本的判斷；佈局只能定製<template>裏的內容，跟佈局有關係。在工做中修改時要看狀況來編寫代碼。

　　7.Nuxt的錯誤頁面和個性meta設置

　　當用戶輸入路由錯誤的時候，咱們須要給他一個明確的指引，因此說在應用程序開發中404頁面是必不可少的。Nuxt.js支持直接在默認佈局文件夾裏創建錯誤頁面。

　　<1>創建錯誤頁面

　　在根目錄下的layouts文件夾下創建一個error.vue文件，它至關於一個顯示應用錯誤的組件。

<template>
  <div>
      <h2 v-if="error.statusCode==404">404頁面不存在</h2>
      <h2 v-else>500服務器錯誤</h2>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>
 
<script>
export default {
  props:['error'],
}
</script>

　　代碼用v-if進行判斷錯誤類型，須要注意的是這個錯誤是你須要在<script>裏進行聲明的，若是不聲明程序是找不到error.statusCode的。

　　這裏我也用了一個<nuxt-link>的簡單寫法直接跟上路徑就能夠了。

　　<2>個性meta設置

　　頁面的Meta對於SEO的設置很是重要，好比你如今要做個新聞頁面，那爲了搜索引擎對新聞的收錄，須要每一個頁面對新聞都有不一樣的title和meta設置。直接使用head方法來設置當前頁面的頭部信息就能夠了。咱們如今要把New-1這個頁面設置成個性的meta和title。

　　第一步：咱們先把pages/news/index.vue頁面的連接進行修改一下，傳入一個title，目的是爲了在新聞具體頁面進行接收title，造成文章的標題。

　　/pages/news/index.vue

<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'jspang.com'}}">News-1</nuxt-link></li>

 

　　第二步：修改/pages/news/_id.vue，讓它根據傳遞值變成獨特的meta和title標籤。

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>
<script>
export default {
 
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//獨立設置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
}
  
</script>

　　ps：爲了不子組件中的meta標籤不能正確覆蓋父組件中相同的標籤而產生重複的現象，建議利用 hid 鍵爲meta標籤配一個惟一的標識編號。

　　8.asyncData方法獲取數據

　　在項目中須要在初始化頁面前先獲得數據，也就是咱們常說的異步請求數據。Nuxt.js貼心的爲咱們擴展了Vue.js的方法，增長了anyncData。從名字上就很好理解，這是一個異步的方法。

　　<1>建立遠程數據

　　在這裏製做一些假的遠程數據，我選擇的網站是myjson.com，它是一個json的簡單倉庫，學習使用是很是適合的。
咱們打開網站，在對話空中輸入JSON代碼，這個代碼能夠本身隨意輸入哦。　　

{
  "name": "Newbie",
  "age": 23,
  "interest": "wan er!"
}

 

　　輸入後，網站會給你一個地址，這就是你這個JSON倉庫的地址了。

　　https://api.myjson.com/bins/xkj78

　　<2>安裝Axios

　　Vue.js官方推薦使用的遠程數據獲取方式就Axios，因此咱們安裝官方推薦，來使用Axios。這裏咱們使用npm 來安裝 axios。
　　直接在終端中輸入下面的命令：

npm install axios --save

　　ansycData的promise方法

　　咱們在pages下面新建一個文件，叫作ansyData.vue。
　　而後寫入下面的代碼：

<template>
  <div>
      <h1>姓名：{{info.name}}</h1>
      <h2>年齡：{{info.age}}</h2>
      <h2>興趣：{{info.interest}}</h2>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  asyncData(){
      return axios.get('https://api.myjson.com/bins/8gdmr')
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })
      
  }
}
</script>

 

　　這時候咱們能夠看到，瀏覽器中已經能輸出結果了. http://217.0.0.1:3000/ansyData

　　ansycData的await方法

　　固然上面的方法稍顯過期，如今都在用ansyc...await來解決異步,改寫上面的代碼。

<template>
    <div>
        <h1>姓名：{{info.name}}</h1>
        <h2>年齡：{{info.age}}</h2>
        <h2>興趣：{{info.interest}}</h2>


    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data(){
            return {
                name:'hello World',
            }
        },
        async asyncData(){
            let {data}=await axios.get('https://api.myjson.com/bins/xkj78')
            return {info: data}

        }
    }
</script>

 

 

　　9.靜態資源和打包　　

　　<1>直接引入圖片

　　咱們在網上任意下載一個圖片，放到項目中的static文件夾下面，而後可使用下面的引入方法進行引用

<div><img src="~static/logo.png" /></div>

　　這種引用方法是不用估計相對路徑的，「~」就至關於定位到了項目根目錄，這時候你的圖片路徑就不會出現錯誤，就算打包也是正常的。

　　<2>CSS引入圖片

　　若是在CSS中引入圖片，方法和html中直接引入是同樣的，也是用「~」符號引入。

<style>
  .diss{
    width: 300px;
    height: 100px;
    background-image: url('~static/logo.png')
  }
</style>

　　<3>打包靜態HTML並運行

　　用Nuxt.js製做完成後，你能夠打包成靜態文件並放在服務器上，進行運行。
　　在終端中輸入：

npm run generate

　　會生成一個dist文件夾，裏邊就是生產的靜態html文件，直接放到服務器端進行運行了。

　　若是你不會Node或者其餘服務器知識，你能夠簡單安裝一個最簡單的服務器-live-server。

npm install -g live-server

　　而後在dist文件夾下輸入live-server就能夠了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程