河南网站建设制作价格,作作网站,wordpress 相关帖子,wordpress 3.9 漏洞文章目录 入口文件组件 Components页面 Pages布局 Layouts Nuxt 官网地址#xff1a;
https://nuxt.com/ Nuxt 提供多个组件层来实现应用程序的用户界面。
入口文件 App.vue组件 Components页面 Pages布局 Layouts
下面逐一进行介绍。
入口文件
默认情况下#xff0c;Nu… 文章目录 入口文件组件 Components页面 Pages布局 Layouts Nuxt 官网地址
https://nuxt.com/ Nuxt 提供多个组件层来实现应用程序的用户界面。
入口文件 App.vue组件 Components页面 Pages布局 Layouts
下面逐一进行介绍。
入口文件
默认情况下Nuxt 会将 app.vue 文件视为入口点并在应用程序的每个路由中呈现其内容。下面的代码片段是 app.vue 文件的基础代码结构
// App.vuetemplatedivh1Welcome to the homepage/h1/div
/template如果您熟悉 Vue可能会想知道 main.js 在哪里通常创建 Vue 应用程序的文件。Nuxt 在幕后完成了这项工作。 组件 Components
大多数组件都是用户界面中可重复使用的部分如按钮和菜单。在 Nuxt 中您可以在 components/ 目录中创建这些组件它们将自动在您的应用程序中可用而无需显式导入。
创建组件 在 components 目录下创建 AppAlert.vue 文件即是创建了一个名为AppAlert的组件应用启动后它就被自动加载无需导入即可使用。
// components/AppAlert.vuetemplatespan classwarningslot //span
/templatestyle scoped
.warning {color: orange;
}
/style使用组件 在其他页面如 app.vue中直接使用
// app.vuetemplatedivh1Welcome to the homepage/h1AppAlertAppAlert Component./AppAlert/div
/template页面 Pages
页面代表每个特定路由模式的视图。pages/ 目录中的每个文件都代表了显示其内容的不同路由。
通过在 pages/ 目录下创建 .vue 文件以创建更多页面及其相应路由并在 app.vue 中添加 NuxtPage / 组件来加载匹配当前路由模式的。
下面创建两个页面做示例
创建 pages/index.vue 文件
templatedivh1 index page/h1AppAlertAppAlert Component./AppAlert/div
/template创建 pages/about.vue 文件
templatedivh1 about page/h1AppAlertAppAlert Component./AppAlert/div
/template创建的页面如何通过路由访问呢此处先做简单介绍后续会写一篇专门介绍路由的文章。
首先需要 nuxt.config.ts 增加配置项 pages:true在 App.vue 文件中增加 NuxtPage / 组件来展示请求的路由对应文件内容。pages 目录下 index.vue 文件将映射到应用程序的 / 根路由其他文件则以文件名为路由。也就是说访问 http://localhost:3000 就展示 index.vue 的内容访问 http://localhost:3000/about 就展示 about.vue 的内容 注意pages/index.vue 只能通过 http://localhost:3000 来访问不能通过 http://localhost:3000/index 访问访问会报 404 错。 布局 Layouts
布局是围绕包含多个页面的公共用户界面的页面的包装器例如页眉和页脚显示。 布局是使用 组件显示页面内容的 Vue 文件。默认情况下将使用 layouts/default.vue 文件。 布局被放置在 layouts/目录中使用时将通过异步导入自动加载。 如果您的应用程序中只有一个布局我们建议您使用带有 NuxtPage 组件的 app.vue 代替。 默认布局的使用方法是将 NuxtLayout 添加到 app.vue 中。更多自定义布局使用方法后续会写专篇文章来做分享
创建默认布局文件
// layouts/default.vuetemplatedivdiv classheaderheader Block/divslot /div classfooterfooter Block/div/div
/templatestyle scoped
.header {border-bottom: 1px solid #e0e0e0;text-align: center;
}.footer {border-top: 1px solid #e0e0e0;text-align: center;
}
/style使用布局
需要在 app.vue 文件中添加 NuxtLayout 组件
// app.vuetemplatedivNuxtLayoutNuxtPage //NuxtLayout/div
/template此时再访问 http://localhost:3000 和 http://localhost:3000/about 就可以看到 layout 的效果了。
