nuxt.js自定义模版
2022/3/6 6:17:56
本文主要是介绍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自定义模版的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-27Vue2面试真题详解与实战教程
- 2024-12-27Vue3面试真题详解与实战攻略
- 2024-12-27JS大厂面试真题解析与实战指南
- 2024-12-27JS 大厂面试真题详解与实战指南
- 2024-12-27React 大厂面试真题详解及应对策略
- 2024-12-27Vue2 大厂面试真题详解及实战演练
- 2024-12-27Vue3 大厂面试真题详解及实战指南
- 2024-12-27Vue3大厂面试真题详解与实战攻略
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础