NuxtJS基础
NuxtJS
中文网：https://www.nuxtjs.cn/
最常见的就是服务端渲染（SSR），与传统的 Vue SPA 相比，使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。
也有生成静态站点和单页应用程序 (SPA)，相对来讲用的没有那么多
安装
为了快速入门，Nuxt.js 团队创建了脚手架工具 create-nuxt-app。
确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：
1
| npx create-nuxt-app <项目名>
|
或者用 yarn ：
1
| yarn create nuxt-app <项目名>
|
从头开始新建项目
如果不使用 Nuxt.js 提供的 starter 模板，我们也可以从头开始新建一个 Nuxt.js 应用项目，过程非常简单，只需要 1 个文件和 1 个目录。如下所示：
新建 package.json 文件
package.json 文件用来设定如何运行 nuxt：
1
2
3
4
5
6
| {
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
|
上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。
安装 nuxt
一旦 package.json 创建好， 可以通过以下 npm 命令将 nuxt 安装至项目中：
pages 目录
Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。
创建 pages 目录：
创建我们的第一个页面 pages/index.vue：
1
2
3
| <template>
<h1>Hello world!</h1>
</template>
|
然后启动项目：
现在我们的应用运行在 http://localhost:3000 上运行。
路由
要在页面之间使用路由，我们建议使用标签。
1
| <nuxt-link to="/">首页</nuxt-link>
|
使用a链接跳转会刷新页面
编程式导航和Vue的一样，就是用的Router
1
2
3
4
5
6
7
| <button @click="goto">首页</button>
···
methods:{
goto(){
this.$router.push('/')
}
}
|
基础路由
假设 pages 的目录结构如下：
1
2
3
4
5
| pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
|
那么，Nuxt.js 自动生成的路由配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
|
动态路由
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
以下目录结构：
1
2
3
4
5
6
7
| pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
|
Nuxt.js 生成对应的路由配置表为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}
|
你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。
嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如：
1
2
3
4
5
| pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
|
Nuxt.js 自动生成的路由配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| router: {
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: '',
component: 'pages/users/index.vue',
name: 'users'
},
{
path: ':id',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
}
|
动态嵌套路由
这个应用场景比较少见，但是 Nuxt.js 仍然支持：在动态路由下配置动态子路由。
假设文件结构如下：
1
2
3
4
5
6
7
8
9
| pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue
|
Nuxt.js 自动生成的路由配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| router: {
routes: [
{
path: '/',
component: 'pages/index.vue',
name: 'index'
},
{
path: '/:category',
component: 'pages/_category.vue',
children: [
{
path: '',
component: 'pages/_category/index.vue',
name: 'category'
},
{
path: ':subCategory',
component: 'pages/_category/_subCategory.vue',
children: [
{
path: '',
component: 'pages/_category/_subCategory/index.vue',
name: 'category-subCategory'
},
{
path: ':id',
component: 'pages/_category/_subCategory/_id.vue',
name: 'category-subCategory-id'
}
]
}
]
}
]
}
|
异步数据
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
1
2
3
4
| async asyncData({ params }) {
const { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
|
上下文对象
可通过 API context 来了解该对象的所有属性和方法。
