初始化

使用腳手架工具 create-nuxt-app 快速創(chuàng)建

npx create-nuxt-app <項(xiàng)目名>

npx create-nuxt-app <項(xiàng)目名>

執(zhí)行一些選擇

1. 在集成的服務(wù)器端框架之間進(jìn)行選擇:
2. 選擇您喜歡的 UI 框架:
3. 選擇您喜歡的測(cè)試框架:
4. 選擇你想要的 Nuxt 模式 (Universal or SPA)
5. 添加 axios module 以輕松地將 HTTP 請(qǐng)求發(fā)送到您的應(yīng)用程序中烛愧。
6. 添加 EsLint 以在保存時(shí)代碼規(guī)范和錯(cuò)誤檢查您的代碼。
7. 添加 Prettier 以在保存時(shí)格式化/美化您的代碼。

Nuxt.js 特點(diǎn)

• 基于 Vue.js
• 自動(dòng)代碼分層
• 服務(wù)端渲染
• 強(qiáng)大的路由功能遮怜，支持異步數(shù)據(jù)
• 靜態(tài)文件服務(wù)
• ES6/ES7 語法支持
• 打包和壓縮 JS 和 CSS
• HTML 頭部標(biāo)簽管理
• 本地開發(fā)支持熱加載
• 集成 ESLint
• 支持各種樣式預(yù)處理器： SASS古程、LESS谈截、 Stylus 等等

基本 nuxt 配置

修改 pages/index.vue

 <h1 class="title">Hello world</h1>

在 localhost:3000 可以看到更新效果

Nuxt 目錄結(jié)構(gòu)

|-- .nuxt                            // Nuxt自動(dòng)生成玖院，臨時(shí)的用于編輯的文件台舱，build
|-- assets                           // 用于組織未編譯的靜態(tài)資源入LESS律杠、SASS 或 JavaScript
|-- components                       // 用于自己編寫的Vue組件潭流，比如滾動(dòng)組件，日歷組件柜去，分頁組件
|-- layouts                          // 布局目錄灰嫉，用于組織應(yīng)用的布局組件，不可更改嗓奢。
|-- middleware                       // 用于存放中間件
|-- pages                            // 用于存放寫的頁面讼撒，我們主要的工作區(qū)域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放靜態(tài)資源文件，比如圖片
|-- store                            // 用于組織應(yīng)用的Vuex 狀態(tài)管理股耽。
|-- .editorconfig                    // 開發(fā)工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件根盒，用于檢查代碼格式
|-- .gitignore                       // 配置git不上傳的文件
|-- nuxt.config.json                 // 用于組織Nuxt.js應(yīng)用的個(gè)性化配置，已覆蓋默認(rèn)配置
|-- package-lock.json                // npm自動(dòng)生成物蝙，用于幫助package的統(tǒng)一性設(shè)置的炎滞，yarn也有相同的操作
|-- package-lock.json                // npm自動(dòng)生成，用于幫助package的統(tǒng)一性設(shè)置的诬乞，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

在您的 vue 模板中, 如果你需要引入 assets 或者 static 目錄, 使用 ~/assets/your_image.png 和 ~/static/your_image.png 方式册赛。

配置 IP 和端口

在根目錄下的 package.json 里對(duì) config 項(xiàng)進(jìn)行配置

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

配置全局 css

定義一個(gè)全局的 CSS 來初始化我們的頁面渲染，這里使用 normailze.css震嫉。

新建 assets/css/normalize.css

修改 nuxt.config.js

css: ["element-ui/lib/theme-chalk/index.css", "~assets/css/normailze.css"],

normalize.css

修改 webpack 配置

在 nuxt.config.js 中可以對(duì) webpack 配置進(jìn)行覆蓋

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)/
        })
      }
    }
  }

寫一個(gè) demo

編寫一個(gè)測(cè)試 demo (找個(gè)網(wǎng)站抄抄),來看看基本流程

npm install iview --save
或
vue add iview (需要vue-cli支持)

引入并配置 iview

想要加入其它的配置森瘪，可以在 nuxt.config.js 的 plugins 配置項(xiàng)中加入，同時(shí)在 plugins 文件夾下加入引入邏輯票堵。例如：

nuxt.config.js

{src: '~plugins/iview', ssr: true}

同時(shí)新建 plugins/iview.js

import Vue from 'vue'
import iView from 'iview'

Vue.use(iView)
import 'iview/dist/styles/iview.css'

修改默認(rèn)布局

可通過添加 layouts/default.vue 文件來擴(kuò)展應(yīng)用的默認(rèn)布局

<template>
    <div class="layout">
  ......
    </div>
</template>

傳統(tǒng)的 spa 使用的<router-view>,但在 nuxtjs 中使用 <nuxt/> 組件顯示頁面的主體內(nèi)容.created 和 data 中的邏輯扼睬，是在服務(wù)端加載時(shí)處理的，并不是瀏覽器端悴势，瀏覽器端的邏輯比如 window 或 location 等對(duì)象要在 mounted 中寫痰驱，否則會(huì)報(bào)錯(cuò).head 中定義一些元數(shù)據(jù)，這些元數(shù)據(jù)會(huì)被爬蟲抓取到瞳浦，可以在每一個(gè)頁面中自定義.

添加靜態(tài)資源

網(wǎng)上隨便下張圖片,然后新建 pages/index

<template>
    <div class="container">
        <div>
            <Card v-for="i in 5" :key="i" :style="{width:'100%',marginBottom:'15px'}">
                <div style="text-align:center">
                    <img src="~/static/image/cat.jpg" height="300px" />
                    <h3>A high quality UI Toolkit based on Vue.js</h3>
                </div>
            </Card>
        </div>
    </div>
</template>

@和~都可以用來引入圖片

nuxt 的路由使用

nuxt 中的基礎(chǔ)路由是根據(jù) pages 的目錄結(jié)構(gòu)來生成的.例如 pages/index.vue 就是{name:'index',path:'/',component:'pages/index.vue'}, 同理 pages/books/index.vue 就是{name:'books',path:'/books',component:'pages/books/index.vue'}

修改 layout/default.vue

<Menu mode="horizontal" theme="dark" active-name="1">
  <div class="layout-logo"></div>
  <div class="layout-nav">
    <MenuItem name="1">
      <Icon type="ios-navigate"></Icon>
      <nuxt-link to="/">首頁</nuxt-link>
    </MenuItem>
    <MenuItem name="2">
      <Icon type="ios-keypad"></Icon>發(fā)現(xiàn)
    </MenuItem>
    <MenuItem name="3">
      <nuxt-link to="/books">小書</nuxt-link>
    </MenuItem>
  </div>
</Menu>

Nuxt.js 推薦nuxt-link標(biāo)簽來構(gòu)建路由體系

asyncData 方法獲取數(shù)據(jù)

使用 asyncData 的方法，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)废士。asyncData 方法會(huì)在組件（限于頁面組件）每次加載之前被調(diào)用叫潦。它可以在服務(wù)端或路由更新之前被調(diào)用。 在這個(gè)方法被調(diào)用的時(shí)候官硝，第一個(gè)參數(shù)被設(shè)定為當(dāng)前頁面的上下文對(duì)象矗蕊，你可以利用 asyncData 方法來獲取數(shù)據(jù)，Nuxt.js 會(huì)將 asyncData 返回的數(shù)據(jù)融合組件 data 方法返回的數(shù)據(jù)一并返回給當(dāng)前組件氢架。由于 asyncData 方法是在組件 初始化 前被調(diào)用的傻咖，所以在方法內(nèi)是沒有辦法通過 this 來引用組件的實(shí)例對(duì)象。

npm install axios --save

在http://myjson.com/上創(chuàng)建假偽數(shù)據(jù)

{
  "data": [
    {
      "name": "Cesium基礎(chǔ)功能-鷹眼地圖岖研。附帶源碼下載"
    },
    {
      "name": "iOS開發(fā)簡記（7）：網(wǎng)絡(luò)請(qǐng)求模塊"
    },
    {
      "name": "iOS開發(fā)簡記（7）：網(wǎng)絡(luò)請(qǐng)求模塊"
    },
    {
      "name": "（難度Hard） Problem 132. Palindrome Partitioning II（回文串拆分II）"
    },
    {
      "name": "iOS 13適配問題"
    },
    {
      "name": "Cesium基礎(chǔ)功能-氣泡彈窗卿操。附帶源碼下載"
    },
    {
      "name": "重學(xué)安卓：是讓人耳目一新的 Jetpack MVVM 精講熬臁！"
    },
    {
      "name": "iOS開發(fā)簡記（6）：storyboard的使用"
    },
    {
      "name": "最熟悉的陌生人：5 分鐘快速理解 HTTP2"
    }
  ]
}

復(fù)制粘貼,點(diǎn)擊保存,獲取地址https://api.myjson.com/bins/f1bdx

新建 pages/index.vue

<template>
    <div class="container">
        <div>
            <Card v-for="(item,index) in books" :key="index" :style="{width:'100%',marginBottom:'15px'}">
                <div style="text-align:center">
                    <img src="~/static/image/cat.jpg" height="300px" />
                    <h3>{{ item.name }}</h3>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/f1bdx')
      return {info: data}
  }
}
</script>

Nuxt 頁面 meta 設(shè)置

Nuxt.js 為頁面提供的特殊配置項(xiàng)害淤。其中 head 配置當(dāng)前頁面的 Meta 標(biāo)簽, 詳情參考 頁面頭部配置 API扇雕。

    head: {
        title: '一本書 - 首頁',
        meta: [
            {
                hid: 'description',
                name: 'description',
                content: 'website description'
            },
            { name: 'keywords', content: '一本書,碼農(nóng),技術(shù),vue,node,nuxt,前端' }
        ]
    },

打開網(wǎng)頁->刷新->右鍵查看,效果就顯示出來了,這也是 nuxt 的一大優(yōu)點(diǎn)

添加頁面切換特效

全局動(dòng)畫默認(rèn)使用 page 來進(jìn)行設(shè)置，例如現(xiàn)在我們?yōu)槊總€(gè)頁面都設(shè)置一個(gè)進(jìn)入和退出時(shí)的漸隱漸現(xiàn)的效果窥摄。我們可以先在根目錄的 assets/css 下建立一個(gè) main.css 文件镶奉。

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

然后在 nuxt.config.js 里加入一個(gè)全局的 css 文件就可以了。

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

目前官方設(shè)定nuxt-link組件制作跳轉(zhuǎn)鏈接才有動(dòng)畫

制作一個(gè)詳情頁

修改 pages/books/index.vue

<Row type="flex" gutter="10" justify="start" class="code-row-bg">
  <Col v-for="i in 10" :key="i" span="6">
    <Card style="width:100%">
      <nuxt-link :to="'/books/'+i">
        <div style="text-align:center">
          <img style="width:100%" src="https://img3.doubanio.com/view/subject/m/public/s6974202.jpg" />
          <h3>史蒂夫·喬布斯傳</h3>
        </div>
      </nuxt-link>
    </Card>
  </Col>
</Row>

在 Nuxt.js 里面定義帶參數(shù)的動(dòng)態(tài)路由崭放，需要?jiǎng)?chuàng)建對(duì)應(yīng)的以下劃線作為前綴的 Vue 文件 或 目錄哨苛。也就是要么創(chuàng)建_id.vue,要么創(chuàng)建_id/index.vue

新建 pages/books/_id.vue

<template>
    <div>
        <Card style="width:100%">
            <div style="text-align:center">
                <img style="width:100%" src="https://img3.doubanio.com/view/subject/m/public/s6974202.jpg" />
                <h3>史蒂夫·喬布斯傳</h3>
                <p>當(dāng)前id : {{ id }}</p>
            </div>
        </Card>
    </div>
</template>

<script>
export default {
    validate({ params }) {
        return /^[0-9]+$/.test(params.id)
    },
    data() {
        return {
            id: this.$route.params.id
        }
    },
    head() {
        return {
            title: '史蒂夫·喬布斯傳',
            meta: [{ hid: 'description', name: 'books', content: '史蒂夫·喬布斯傳' }]
        }
    }
}
</script>

給整個(gè)網(wǎng)站添加 head

Nuxt.js 允許你在 nuxt.config.js 里定義應(yīng)用所需的所有默認(rèn) meta 標(biāo)簽，在 head 字段里配置就可以了

新建 root/app.html

<!DOCTYPE html>
<html lang="en">
    <head>
        {{
            HEAD
        }}
    </head>

    <body>
        {{ APP }}
    </body>
</html>

nuxt 實(shí)際上已經(jīng)將開發(fā)的一些需求都準(zhǔn)備好了,使用 nuxt 進(jìn)行 vue 服務(wù)端渲染能夠極大的提高開發(fā)效率

最后打包

靜態(tài)應(yīng)用部署

npm run generate

demo

參考

• iview
• 官方文檔
• 技術(shù)胖的 Nuxt.js