目录
一、前言
上面原理转载自:https://blog.csdn.net/xiaodi520520/article/details/102732337
1、nuxt常用配置项
1.1 CSS全局配置
在assets/css/目录下创建一个样式文件叫:normailze.css
html { color:red; }
找到nuxt.config.js文件添加如下代码:
/*
~ 代表根目录,相当于VUE中配置的@符号
*/
css:['~assets/css/normailze.css'],
1.2 配置IP和端口
开发中指定固定IP与端口号,找到package.json文件输入以下内容
/*
host 表示IP地址
port 表示端口设置
*/
"config":{
"nuxt":{
"host":"127.0.0.56",
"port":"8000"
}
},
1.3 webpack中的loader配置
配置一个url-loader来进行小图片的64位打包,在nuxt.config.js的build选项里进行配置
build: {
rules:[
{
//处理图片资源
//问题:默认处理不了html中img图片
test:/\.(png|jpe?g|gif|svg)$/,
//使用一个loader
//下载 url-loader file-loader
loader:'url-loader',
options:{
limit:10000,
name:'img/[name].[hash].[ext]'
}
}
],
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
以上无论哪一环节配置好后进行npm run dev重启
2、Nuxt的路由配置和params参数传递
根目录的pages文件下新建两个文件夹,about和news,如下图
在about文件夹下新建index.vue文件,并写入下面的代码:
<template>
<div>
你好我是About页面
<router-link :to="{name:'index'}">HOME</router-link>
</div>
</template>
在news文件夹下新建index.vue文件,并写入下面的代码:
<template>
<div>
你好我是news页面
接收参数newsID:{{$route.params.newsId}}
<router-link :to="{name:'index'}">HOME</router-link>
</div>
</template>
修改原来的pages文件夹下的index.vue,
<template>
<div>
Hello World
<ul>
<li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
<li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
<li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li>
</ul>
</div>
</template>
注:nuxt-link 标签用于页面跳转相当于 a 标签
3、Nuxt的动态路由和参数校验
在news文件夹下面新建_id.vue的文件,以下画线为前缀的Vue文件就是动态路由,然后在文件里边有 $route.params.id来接收参数。
在/pages/news/index.vue进行修改,增加两个详细页的路由News-1和News-2。
<template>
<div>
你好我是news页面
<!--
这样子是不行的
<router-link :to="{name:'index',params:{id:123}}">HOME</router-link>
<router-link :to="{name:'news',params:{id:456}}">news-1</router-link>
<router-link :to="{name:'news',params:{id:567}}">news-2</router-link>
-->
<!-- 下面这种相当于vue的params传参 -->
<!-- 直接写a标签也可以
<a href="/news/123">news-1</a>
<a href="/news/456">news-2</a>
<a href="/news/haha">news-3</a>
-->
<!-- 通过route-link 传参,此处name的名字必须是以‘ news-id ’ 进行输写->
<router-link :to="{name:'index',params:{id:123}}">HOME</router-link>
<router-link :to="{name:'news-id',params:{id:456}}">news-1</router-link>
<router-link :to="{name:'news-id',params:{id:789}}">news-2</router-link>
</div>
</template>
动态参数校验
Nuxt.js 的校验方法使用validate( ),找到/pages/news/_id.vue,在script标签里写入如下内容
<template>
<div>
获取ID参数:{{$route.params.id}}
</div>
</template>
<script>
export default {
validate ({ params }) {
//参数必须为数字,如果不是数字会页面报错:正则返回了true正常进入页面,如果返回false进入404页面
return /^\d+$/.test(params.id)
}
}
</script>
4、Nuxt的路由动画效果
路由切换动画效果
1、全局路由动画效果(指所有的页面都使用)
先在根目录的assets/css下建立一个css文件。
html{
color: rebeccapurple;
}
/*名字必须按照下面的写,这个是nuxt规定的*/
/* 全局样式 */
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
然后在nuxt.config.js里加入一个全局的css文件就可以了。
css: ['~assets/css/normailze.css'],
这时候在页面切换的时候就会有2秒钟的动画切换效果了,如果有些页面是没有效果,这是因为没有用 nuxt-link 组件来制作跳转链接。如果以前用的是a标签换成nuxt-link标签。
2、单独路由动画效果
想给一个页面单独设置特殊的效果时,我们只要在css里改变默认的page,然后在页面组件的配置中加入transition字段即可。例如,我们想给about页面加入一个字体放大然后缩小的效果,其他页面没有这个效果。
在全局样式assets/normailze.css 中添加以下内容。
/* 单独设置页面动效 */
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;
}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
然后在about/index.vue组件中设置
export default {
transition:'test'
}
注:CSS样式中的 test- 必须与组件中定义的transition 的名字 ‘test’ 相同。也就是说transition中的名字叫什么,那么 CSS 中的开始名字叫什么。需保持一致。
5、Nuxt的默认模版和默认布局
1、默认模版,需要在根目录下创建一个app.html,
<!DOCTYPE html>
<html lang="en">
<head>
<!--
这段代码不需要写,因为在 nuxt.config.js 里 nuxt.js 已经默认配置了,
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
-->
{{HEAD}}
</head>
<body>
<!--
{{APP}} 就是我们写的pages文件夹下的主体页面。需要注意的是HEAD和APP都需要大写,
如果小写会报错的。
-->
<p>欢迎来到‘码世界’学习乐园</p>
{{APP}}
</body>
</html>
2、默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息,只是关于标签下的内容统一订制。
注:默认模版和默认布局的区别::
1. 默认模版----需要订制头部信息。默认布局-----不需要,只需要在 template 标签下订制内容及可,根布局有关联。
2. 默认模版----建立后需要重启服务器,否则显示不会成功。默认布局------不需要。
6、Nuxt的404错误页面设置和页面头部的meta标签设置
6.1 Nuxt的404错误页面设置
Nuxt.js支持直接在默认布局文件夹里建立错误页面。在根目录下的layouts文件夹下建立一个error.vue文件,它相当于一个显示应用错误的组件
6.2页面头部的meta标签设置
meta标签的设置对搜索引擎非常重要,nuxt.js 可以直接使用head方法来设置当前页面的头部信息。
1.我们先把pages/news/index.vue页面的链接进行修改一下,传入一个title,目的是为了在新闻具体页面进行接收title,形成文章的标题。
2、第一步完成后,修改/pages/news/_id.vue,让它根据传递值变成独特的meta和title标签。
代码如下:
<script>
export default {
validate ({ params }) {
//参数必须为数字,如果不是数字会页面报错
return /^\d+$/.test(params.id)
},
data(){
return {
title:this.$route.params.title, //获取params传过来的title参数
}
},
//独立设置head信息
head(){
return {
title:this.title, //html页面 head头部title标签赋值
meta:[
/*
html页面 head标签 内 meta标签设置, 此处hid 如果随意写,例如设置成 hide:'jfkdfjdkf',头部会有两个meat标签
hid:'description' 表示覆盖,采用最新的。
*/
{hid:'description',name:'news',content:'This is news page'}
]
}
}
}
</script>
7、asyncData方法获取数据
nuxt.js 的异步请求数据,使用anyncData方法
// 假如你的JSON仓库地址是: https://api.myjson.com/bins/8gdmr
// 数据结构是下面这样的
{
"name": "码世界",
"age": 18,
"interest": "I love WEB!"
}
Vue.js官方推荐使用的远程数据获取方式就Axios,安装axios
npm install axios --save
7.1asyncData的promise方法
我们在pages下面新建一个文件,叫做ansyData.vue。如下代码
<template>
<div>
<p>{{name}}</p>
<p>{{info.name}}}</p>
<p>{{info.age}}}</p>
<p>{{info.interest}}}</p>
</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 //相当于在data中添加了info字段
}
})
},
}
</script>
7.2ansycData的await方法
用ansyc…await来解决异步
代码如下:
//ansycData的await方法
async asyncData() {
let { data } = await axios.get('https://api.myjson.com/bins/8gdmr'); //ES6解构赋值
return { info : data} //相当于在data中添加了info字段
},
8、nuxt静态资源和打包
8.1nuxt静态资源
为什么引入图片在本地可以显示,打包上线后不显示,因为nuxt 不能使用相对路径,使用“~”符号代替相对路径
<!--
这种本地显示正确,打包后不显示
<img src="static/logo.png"/>
-->
<!-- 本地与服务器打包都显示 -->
<img src="~static/logo.png"/>
CSS引入图片
如果在CSS中引入图片,方法和html中直接引入是一样的,也是用“~”符号引入。
<style>
.diss{
width: 300px;
height: 100px;
background-image: url('~static/logo.png')
}
</style>
8.1打包静态HTML并运行
在当前开发项目终端运行
npm run generate
运行完成后会生成一个dist文件,把dist文件单独拷贝出来,打开里面的index.html文件,会发现里面有些内容不显示,这时单独把dist文件用vscode打开,在当前dist项目终端安装
npm install live-server -g
安装完成后,直接在当前dist项目终端输入 live-serve