Nuxt.js是vue官方推薦的一個通用應(yīng)用框架，至于為什么要用nuxt.js，就不羅嗦了。

先來看一個效果

nuxt.gif

讓蜘蛛爬的.png

下面一步一步來實(shí)現(xiàn)

node環(huán)境，vue_cli自行安裝

利用 vue-cli安裝Nuxt.js提供的starter模板

$ vue init nuxt-community/starter-template <project-name>

安裝依賴包

$ cd <project-name>
$ npm install

啟動項(xiàng)目

$ npm run dev

下面直接瀏覽器打開 http://localhost:3000

來看一下項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu).png

• 資源目錄

  • assets 用于組織未編譯的靜態(tài)資源如 LESS、SASS 或 JavaScript。

• 組件目錄

  • components 用于組織應(yīng)用的 Vue.js 組件。Nuxt.js 不會擴(kuò)展增強(qiáng)該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有 asyncData 方法的特性。

• 布局目錄

  • 布局目錄 layouts 用于組織應(yīng)用的布局組件。該目錄名為Nuxt.js保留的，不可更改。

• 中間件目錄

  • middleware 目錄用于存放應(yīng)用的中間件。

• 頁面目錄

  • 頁面目錄 pages 用于組織應(yīng)用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件并自動生成對應(yīng)的路由配置。該目錄名為Nuxt.js保留的，不可更改。

• 插件目錄

  • 插件目錄 plugins 用于組織那些需要在 根vue.js應(yīng)用 實(shí)例化之前需要運(yùn)行的 Javascript 插件。

• 靜態(tài)文件目錄

  • 靜態(tài)文件目錄 static 用于存放應(yīng)用的靜態(tài)文件，此類文件不會被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理。 服務(wù)器啟動的時候，該目錄下的文件會映射至應(yīng)用的根路徑 / 下。

• Store 目錄

  • store 目錄用于組織應(yīng)用的 Vuex 狀態(tài)樹 文件。 Nuxt.js 框架集成了 Vuex 狀態(tài)樹 的相關(guān)功能配置，在 store 目錄下創(chuàng)建一個 index.js 文件可激活這些配置。

• nuxt.config.js 文件

  • nuxt.config.js 文件用于組織Nuxt.js 應(yīng)用的個性化配置，以便覆蓋默認(rèn)配置。

• package.json 文件

  • package.json 文件用于描述應(yīng)用的依賴關(guān)系和對外暴露的腳本接口。

先在pages文件夾下面編寫我們的index.vue

<template>
  <div class="container">
    <h2>新聞列表</h2>
    <ul class="users">
      <li v-for="user in users" :key="user.id">
        <nuxt-link to="/users">{{ user.title }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  transition: 'bounce',
  async asyncData() {
    const { data } = await axios.get('http://localhost:8081/getdata')
    console.log(data)
      return { users: data }
  },

}
</script>

<style scoped>
.container {
  text-align: center;
  font-family: sans-serif;
}
.users {
  list-style-type: none;
}
.users li a {
  display: inline-block;

  padding: 10px;
  text-align: left;
  color: #222;
  text-decoration: none;
}
.users li a:hover {
  color: orange;
}
</style>

這里有一個get請求接口，是自己用node搭建，數(shù)據(jù)源是python爬的。

數(shù)據(jù)來源.png

新建一個users.vue

<template>
  <div class="wrap">
    <p>這里是詳情頁</p>
    <nuxt-link to="/">返回首頁</nuxt-link>
  </div>
</template>

<script>
export default {
 transition: 'bounce',
 asyncData() {
    return new Promise((resolve) => {
      setTimeout(function () {
        resolve({})
      }, 0)
    })
  
  },
  head: {
    title: '詳情頁'
  }
}
</script>
<style scoped>
.wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 200px
}
</style>

在assets新建一個全局的mian.css

body {
    background: #eee;
    height: 100%;
    width: 100%;
}

.container {
    text-align: center;
    font-size: 20px;
    transition: all .5s cubic-bezier(.55, 0, .1, 1);
}

.page-enter-active,
.page-leave-active {
    transition: opacity .5s
}

.page-enter,
.page-leave-active {
    opacity: 0
}

.bounce-enter-active {
    animation: bounce-in .8s;
}

.bounce-leave-active {
    animation: bounce-out .5s;
}

@keyframes bounce-in {
    0% {
        transform: scale(0)
    }
    50% {
        transform: scale(1.2)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes bounce-out {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.2)
    }
    100% {
        transform: scale(0)
    }
}

我在全局css中加入了路由跳轉(zhuǎn)的過渡效果，在效果圖中大家應(yīng)該看到效果了，頁面中使用即可

  transition: 'bounce',

全局樣式需要在nuxt.config.js中添加

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

這樣，一個入門級的demo就出來了，如果有不明白的可以查看源碼，最后附上源碼

源碼