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就出来了，如果有不明白的可以查看源码，最后附上源码
