入门级的vue-ssr例子（NUXT）

2018-05-10 本文已影响84人 YuTao_

Nuxt.js是vue官方推荐的一个通用应用框架，至于为什么要用nuxt.js，就不罗嗦了。

先来看一个效果

nuxt.gif

让蜘蛛爬的.png

下面一步一步来实现

node环境，vue_cli自行安装

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

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

安装依赖包

$ cd <project-name>
$ npm install

启动项目

$ npm run dev

下面直接浏览器打开 http://localhost:3000

来看一下项目结构

项目结构.png

资源目录
- assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
组件目录
- components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
布局目录
- 布局目录 layouts 用于组织应用的布局组件。该目录名为Nuxt.js保留的，不可更改。
中间件目录
- middleware 目录用于存放应用的中间件。
页面目录
- 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。该目录名为Nuxt.js保留的，不可更改。
插件目录
- 插件目录 plugins 用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。
静态文件目录
- 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
Store 目录
- store 目录用于组织应用的 Vuex 状态树文件。 Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
nuxt.config.js 文件
- nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
package.json 文件
- package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

先在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搭建，数据源是python爬的。

数据来源.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中加入了路由跳转的过渡效果，在效果图中大家应该看到效果了，页面中使用即可

  transition: 'bounce',

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

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

这样，一个入门级的demo就出来了，如果有不明白的可以查看源码，最后附上源码

入门级的vue-ssr例子（NUXT）

下面一步一步来实现

源码

猜你喜欢

热点阅读