Nuxt 常用配置项
配置 IP 和端口
1
2
3
4
5
6
7
8
9
10
|
"scripts": {
},
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1818"
}
},
|
配置全局CSS
1
2
3
4
5
6
7
|
head: {
},
css: [
'~assets/css/normailze.css',
],
|
配置webpack的loader
在nuxt.config.js里是可以对webpack的基本配置进行覆盖的
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
|
build: {
loaders:[
{
test:/\.(png|jpe?g|gif|svg)$/,
loader:"url-loader",
query:{
limit:10000,
name:'img/[name].[hash].[ext]'
}
}
],
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
|
Nuxt 路由
Nuxt.js 路由会根据 pages 目录中提供的Vue文件自动为您生成配置。
路由跳转传参
1
2
3
4
5
6
7
| <template>
<!--路由跳转传参-->
<nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>
<!--路由接收参数-->
<p>NewsID:{{$route.params.newsId}}</p>
</template>
|
动态路由跳转传参
以下画线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id来接收参数
1
2
3
| <template>
<nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link>
</template>
|
动态参数校验
1
2
3
4
5
6
7
8
| <script>
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
}
}
</script>
|
路由切换动画
全局动画
1
2
3
4
5
6
7
|
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
|
1
2
|
css:['assets/css/main.css'],
|
单页动画
1
2
3
4
5
6
7
8
9
|
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;
}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
|
1
2
3
4
5
| <script>
export default {
transition:'test'
}
</script>
|
Views 布局
默认模板
根目录下创建一个 app.html 就可实现
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
<p>jspang.com 技术胖的博客</p>
{{ APP }}
</body>
</html>
|
默认布局
1
2
3
4
5
6
7
| <!-- layouts/default.vue -->
<template>
<div>
<p>JSPang.com 技术胖的博客</p>
<nuxt/>
</div>
</template>
|
自定义布局
例如：创建博客布局 在layouts 新建一个 blog.vue。
1
2
3
4
5
6
7
| <!--layouts/blog.vue-->
<template>
<div>
<div>My blog navigation bar here</div>
<Nuxt />
</div>
</template>
|
使用博客布局
1
2
3
4
5
6
7
8
9
10
| <!--pages/posts.vue-->
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
}
</script>
|
自定义错误页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!--layouts/error.vue-->
<template>
<div>
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'error' // you can set a custom layout for the error page
}
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script>
export default {
data(){
return{
title:this.$route.params.title,
}
},
// 独立设置 head 信息
head(){
return{
title:this.title,
meta:[
{hid:'description',name:'news',content:'This is news page'}
]
}
}
}
</script>
|
数据请求
安装 Axios
1
| npm install axios --save
|
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
| <template>
<div>
<h1>姓名：{{info.name}}</h1>
<h2>年龄：{{info.age}}</h2>
<h2>兴趣：{{info.interest}}</h2>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return {
name:'hello World',
}
},
// promise
asyncData(){
return axios.get('https://api.myjson.com/bins/8gdmr')
.then((res)=>{
console.log(res)
return {info:res.data}
})
}
// await
async asyncData(){
let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
return {info: data}
}
}
</script>
|
静态资源的引入及打包
直接引入图片
1
2
3
| <template>
<div><img src="~static/logo.png" /></div>
</template>
|
css 图片的引入
1
2
3
4
5
6
7
| <style>
.diss{
width: 300px;
height: 100px;
background-image: url('~static/logo.png')
}
</style>
|
打包静态HTML并运行
live-server 可以查看打包后的文件
相关资料
[代码沙盒]路由
[代码沙盒]Views布局使用
技术胖Nuxt.js教程开启SSR渲染
[视频]技术胖Nuxt.js免费视频教程 开启SSR渲染