###
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 { create
Vuetify } from &#
39;
vuetify&#
39;;
import * as components from &#
39;
vuetify/components&#
39;;
import * as directives from &#
39;
vuetify/directives&#
39;;
export default create
Vuetify({
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 © 202
3 All Rights Reserved
.
</footer>
</div>
</template>
```
此片段说明了怎样运用 Semantic UI 的基础组件完成基本网页架构搭建工作流程。
---
#### 总结对比两种方案优劣点
| 方面 |
Vuetify | Semantic UI |
|
---------------|
----------------------------------|
--------------------------------|
| 设计风格 | Google Material Design 导向 | 更加灵活多样 |
| 学习曲线 | 较陡峭 | 易上手 |
| 社区活跃度 | 高 | 中等 |
无论选用哪一种技术栈路径前进探索实践过程里都会遇到各自独特魅力所在之处值得深入研究尝试一番！
---
超级会员免费看
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
3809
