初始化:
vue init nuxt/starter (类似 vue init webpack)
配置IP和端口:
配置全局CSS
配置webpack的loader
nuxt路由配置和传参
Nuxt的动态路由和参数校验
动态参数校验
Nuxt的路由动画效果
路由的动画效果,也叫作页面的更换效果。Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面制作。
单独设置页面动效
想给一个页面单独设置特殊的效果时,我们只要在css里改变默认的page,然后在页面组件的配置中加入transition字段即可。例如,我们想给about页面加入一个字体放大然后缩小的效果,其他页面没有这个效果。
Nuxt的默认模版和默认布局(一般默认布局)
在开发应用时,经常会用到一些公用的元素,比如网页的标题是一样的,每个页面都是一模一样的标题。这时候我们有两种方法,第一种方法是作一个公用的组件出来,第二种方法是修改默认模版。这两种方法各有利弊,比如公用组件更加灵活,但是每次都需要自己手动引入;模版比较方便,但是只能每个页面都引入。这节课我们就学习一下如何使用Nuxt的默认模版和默认布局功能。
Nuxt的错误页面和个性meta设置
个性meta设置
页面的Meta对于SEO的设置非常重要,比如你现在要作个新闻页面,那为了搜索引擎对新闻的收录,需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。
asyncData方法获取数据
静态资源和打包
打包后的文件需要在http-server等服务器上运行