vue3入门和实战-vue3项目布局


前言

上一节,部署了vue3官方案例,我们需要结合自身项目页面的布局改造下目录结构。
这里涉及两个方面:
1)路由 2)页面layout


一、项目目标

我们的目标是用vue3开发一个网址导航的网站,方面我们工作中快速检索工具和信息查询。
导航网址不得不介绍webstack,我们在官方基础上进行二开。
项目地址
官方demo

在这里插入图片描述

二、页面布局

1.首页布局分析

首页左右布局,左侧导航栏目,右侧是导航内容
左侧上线布局,上面图标,下面栏目列表
右侧上中下布局,头部header,中间导航区域

### Vue3 页面布局示例教程 在 Vue3 中创建页面布局可以通过多种方式实现,其中最常用的是借助第三方框架如 **Vuetify** 或 **Semantic UI** 来快速构建响应式的页面布局。以下是基于这两种工具的具体实现方法。 #### 使用 Vuetify 构建 Vue3 布局组件 Vuetify 是一个流行的 Material Design 组件库,支持 Vue.js 并兼容 Vue3 版本。通过其内置的栅格系统预定义样式类,可以轻松设计复杂的页面布局。 1. 安装 Vuetify 首先,在项目中安装 Vuetify 及相关依赖项: ```bash npm install vuetify@next @vue/cli-plugin-vue-next vue-loader sass sass-loader ``` 2. 初始化配置文件 `vuetify.js` 创建并配置 Vuetify 的初始化脚本: ```javascript import { createVuetify } from &#39;vuetify&#39;; import * as components from &#39;vuetify/components&#39;; import * as directives from &#39;vuetify/directives&#39;; export default createVuetify({ components, directives, }); ``` 3. 在应用入口引入 Vuetify 修改 `main.js` 文件以加载 Vuetify 实例: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import vuetify from &#39;./plugins/vuetify&#39;; // 路径可能因项目结构而异 const app = createApp(App); app.use(vuetify).mount(&#39;#app&#39;); ``` 4. 编写布局模板 利用 Vuetify 提供的 `<v-container>`、`<v-row>` `<v-col>` 等标签来组织页面内容: ```html <template> <v-container fluid> <!-- 头部区域 --> <v-row align="center"> <v-col cols="12" sm="6" md="4">Logo</v-col> <v-col cols="12" sm="6" md="8">导航菜单</v-col> </v-row> <!-- 主体部分 --> <v-row justify="space-between"> <v-col cols="12" lg="9">主要内容区</v-col> <v-col cols="12" lg="3">侧边栏</v-col> </v-row> <!-- 底部版权信息 --> <v-footer padless> <v-col class="text-center" cols="12">© {{ new Date().getFullYear() }} — My Website</v-col> </v-footer> </v-container> </template> ``` 上述代码展示了如何利用 Vuetify 的网格系统划分不同宽度比例的内容区块[^1]。 --- #### 使用 Semantic UI 构建 Vue3 布局组件 如果更倾向于轻量级解决方案,则可以选择 Semantic UI 进行开发。它同样提供了丰富的 CSS 类名用于自定义界面外观。 1. 添加 Semantic UI 样式资源 将官方 CDN 地址嵌入到 HTML 文档头部或者通过 NPM 下载包管理器版本: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css"> ``` 2. 结合 Vue 单文件组件编写语义化标记语言(Semantic Markup Language)形式的视图层逻辑: ```html <template> <div class="ui container"> <!-- Header Section --> <header class="ui segment"> <h1 class="ui header">Website Title</h1> <menu class="ui secondary menu"> <a class="item active">Home</a> <a class="item">Features</a> <a class="item">Pricing</a> </menu> </header> <!-- Content Area --> <section class="ui grid stackable padded vertical stripe segment"> <div class="row"> <div class="eight wide column">Main Article</div> <div class="four wide column">Sidebar Widgets</div> </div> </section> <!-- Footer Block --> <footer class="ui inverted vertical footer segment center aligned"> Copyright © 2023 All Rights Reserved. </footer> </div> </template> ``` 此片段说明了怎样运用 Semantic UI 的基础组件完成基本网页架构搭建工作流程。 --- #### 总结对比两种方案优劣点 | 方面 | Vuetify | Semantic UI | |---------------|----------------------------------|--------------------------------| | 设计风格 | Google Material Design 导向 | 更加灵活多样 | | 学习曲线 | 较陡峭 | 易上手 | | 社区活跃度 | 高 | 中等 | 无论选用哪一种技术栈路径前进探索实践过程里都会遇到各自独特魅力所在之处值得深入研究尝试一番! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值