nuxt header 设置

1. nuxt.config.js 中配置全局

 

2. 在单页面设置单独

 

转载于:https://www.cnblogs.com/panax/p/10814970.html

### NuxtJS 项目示例代码 以下是一个简单的 NuxtJS 项目的示例代码,包含基本的页面结构和功能。此代码展示了如何使用 `pages` 文件夹定义路由,以及如何在组件中使用 `<nuxt-link>` 和 `<nuxt>` 标签[^2]。 #### 目录结构 ```plaintext my-nuxt-app/ ├── pages/ │ ├── index.vue │ └── about.vue ├── layouts/ │ └── default.vue ├── nuxt.config.js └── package.json ``` #### `pages/index.vue` 这是首页文件,定义了根路径 `/` 的内容。 ```vue <template> <div> <h1>欢迎来到首页</h1> <nuxt-link to="/about">前往关于页面</nuxt-link> </div> </template> <script> export default { name: 'IndexPage' } </script> ``` #### `pages/about.vue` 这是关于页面文件,定义了 `/about` 路径的内容。 ```vue <template> <div> <h1>关于我们</h1> <p>这是一个简单的 NuxtJS 示例项目。</p> <nuxt-link to="/">返回首页</nuxt-link> </div> </template> <script> export default { name: 'AboutPage' } </script> ``` #### `layouts/default.vue` 默认布局文件,适用于所有页面。在此文件中,`<nuxt />` 标签用于渲染当前页面的内容[^2]。 ```vue <template> <div> <header> <h1>我的 NuxtJS 应用</h1> </header> <main> <nuxt /> </main> <footer> <p>版权所有 © 2023</p> </footer> </div> </template> <script> export default { name: 'DefaultLayout' } </script> ``` #### `nuxt.config.js` NuxtJS 的配置文件,允许自定义构建选项和插件。 ```javascript export default { // 目标环境(universal 或 server) target: 'static', // 构建配置 build: { extend(config, { isDev }) { if (isDev) { config.devtool = 'source-map'; } } }, // 插件 plugins: [], // 模块 modules: [] }; ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值