Javascript

nuxt.js自定义模版

本文主要是介绍nuxt.js自定义模版,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

最近做项目需要考虑网站的响应式,组件化以及seo优化,所以最后定型用nuxt.js去搞起~~

一开始对这个框架不是很熟悉,虽然是基于vue语法,但是我一开始就踩了一个坑,按照官网流程去进行项目的安装之后,npm run dev直接就可以启动项目,由于网站有公共头部,所以我去看怎么能够将公共对部分通过nuxt的layout布局去实现,而不是定义为一个组件,还得在需要的每个页面引用一遍,有点麻烦,后来我看官方说可以直接修改layouts目录下的default.vue文件,并且还可以自定义layout,一开始项目构建好之后,大家可以发现在.nuxt目录下有一个layouts文件夹,里面有一个default.vue的页面,

 

 

我一度以为是修改那里的文件即可,结果我每次改完之后,重启项目,文件内容都会初始化为默认的内容,我自定义写的东西统统都没了,于是我各种找问题所在,后来才发现,是得自己在根目录下新建一个layouts的文件夹,然后在里面定义default.vue的内容,因为之前修改的default.vue是nuxt自动编译后的文件,修改那里是无效的,啊,这个问题抠了好久,感觉官方文档写的不是太清楚,如有遇见雷同的,希望可以帮到大家!!

继续踩坑去喽,有啥问题随时交流~~

这篇关于nuxt.js自定义模版的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!