河北邯郸做wap网站,网站绑定公众号,wordpress不能自定义菜单,高端网站建设专业公司本章主要是关于整体页面布局及样式处理#xff0c;在进行这一章代码前#xff0c;先将前两章中的示例代码部分删除#xff08;如Home.vue、About.vue、counter.ts、App.vue中引用等#xff09;
1 整体页面布局
页面整体布局构成了产品的框架基础#xff0c;通常涵盖主导…本章主要是关于整体页面布局及样式处理在进行这一章代码前先将前两章中的示例代码部分删除如Home.vue、About.vue、counter.ts、App.vue中引用等
1 整体页面布局
页面整体布局构成了产品的框架基础通常涵盖主导航、侧边栏菜单、面包屑导航以及核心内容展示区域等关键元素
1.1 创建 layout 布局组件
在 src 文件夹下新建文件夹 layout用于放置页面整体布局相关的组件页面。在 layout 文件夹下新建文件 index.vue
//layout/index.vue
templatediv classapp-wrapperdiv classsidebar-container侧边导航/divdiv classmain-containerdiv classheaderdiv classnavbar导航条1/divdiv classtags-view导航条2/div/divdiv classapp-mainrouter-view/router-view/div/div/div
/template1.2 创建 Dashboard 页面
删除 main.ts 中引用的默认样式 style.css在 views 文件夹下新建 Dashboard 文件夹在Dashboard 文件夹下新建文件 index.vue 文件 1.3 配置路由
修改 router/index.ts
//router/index.ts
import {createRouter,createWebHistory,type RouteRecordRaw
} from vue-router;
import Layout from /layout/index.vue;const routes: RouteRecordRaw[] [{path: /,component: Layout,redirect: /dashboard,children: [{path: dashboard,name: Dashboard,component: () import(/views/Dashboard/index.vue)}]}
];export default createRouter({routes, //路由表history: createWebHistory() //路由模式
});1.4 启动项目
启动项目查看页面
npm run dev 2 样式处理
样式使用 Sass Unocss 编写使用前先安装 Sass 和 Unocss。
2.1 安装 Sass Sass 是一种强大的 CSS 预处理器它扩展了 CSS 的功能增加了变量、嵌套规则、混合mixins、继承、函数等高级特性。Sass 提供了更高效、更易于维护的样式编写方式。通过编译Sass 代码转换为标准的 CSS兼容所有浏览器。Sass 有两种语法格式SCSS类似于 CSS 的语法和Indented Sass缩进语法。它广泛应用于大型项目和框架中有助于提高开发效率和代码的可读性。 使用 pnpm 安装 Sass
pnpm install sass -D 2.2 安装 UnoCss UnoCSS 是一个即时按需的原子化 CSS 引擎它提供了一种灵活、强大、快速且愉快的方式来生成和定制 CSS。这个引擎的特点是不需要解析、抽象语法树AST或扫描因此它在性能上比其他类似的 CSS 引擎如 Windi CSS 或 Tailwind CSS JIT快五倍。UnoCSS 是轻量级的零依赖并且对浏览器友好其大小约为 6kb使用 minbrotli 压缩 unocss/preset-uno 是 UnoCSS 的一个预设它提供了一系列基于原子化CSS的实用类。这个预设包含了大量的通用样式规则如颜色、间距、字体大小、边框、布局等使得开发者可以快速应用这些样式到HTML元素上而无需编写具体的CSS代码。unocss/preset-uno 的目标是提供一种简洁、直观的方式来构建界面同时保持高性能和低维护成本。 unocss/preset-attributify 是另一个 UnoCSS 预设它允许开发者使用属性attributes而不是类classes来应用原子化CSS样式。这种方法的优点是可以减少HTML中的类名数量使标记更加简洁并且可以更容易地应用动态样式。例如你可以直接在HTML元素上使用 bg-red、text-lg 等属性来改变背景颜色或文本大小而不需要在元素上添加相应的类。这使得 UnoCSS 的使用更加灵活尤其是在处理动态内容和响应式设计时。 使用 pnpm 安装 UnoCss
pnpm i unocss unocss/preset-uno unocss/preset-attributify -D 安装好后在项目根目录下新建配置文件 uno.config.ts 对 Unocss 进行配置
//uno.config.ts
import { defineConfig } from unocss;
import presetAttributify from unocss/preset-attributify;
import presetUno from unocss/preset-uno;export default defineConfig({presets: [presetAttributify(), presetUno()],
});在 vite.config.ts 中引入 //vite.config.ts
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import path from path;
import UnoCSS from unocss/vite;// https://vite.dev/config/
export default defineConfig({resolve: {alias: [{ find: , replacement: path.resolve(__dirname, src) }]},plugins: [vue(),UnoCSS({configFile: ./UnoCSS.config.ts})]
});在 main.ts 中导入 Unocss //main.ts
import { createApp } from vue;
import App from ./App.vue;import router from ./router;
import { createPinia } from pinia;
import ElementPlus from element-plus;
import element-plus/dist/index.css;
import uno.css;const app createApp(App);
const pinia createPinia();app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount(#app);接着安装 unocss 插件这样在代码中会有 unocss 的代码提示 在页面中使用 Unocss如在 layout.vue 中添加 text-red 属性 效果如下 2.3 Sass Unocss 结合使用
Unocss 可以在页面内添加到 class 中使用或直接如上文所示以行内属性的形式使用但这样不好维护为了便于维护我们希望可以在style/style中使用这样既可以享受 Sass 的语法优势也可以享受 Unocss 的语法优势也更方便维护。为了达到这个目的需要安装一个插件 unocss/transformer-directives 。一般不建议 Sass 和 Unocss 一起使用但是一起用还挺方便的看个人需求吧~ unocss/transformer-directives 是 UnoCSS 的一个转换器插件用于处理 CSS 文件中的特定指令如 apply、screen 和 theme()。它允许开发者将原子化类应用到自定义选择器通过媒体查询条件应用样式以及访问主题配置。这样UnoCSS 的功能得以扩展使得样式编写更加灵活和强大同时保持代码的简洁和可维护性。 使用 pnpm 安装 unocss/transformer-directives
pnpm i unocss/transformer-directives 在 uno.config.ts 中引入
//uno.config.ts
import { defineConfig } from unocss;
import presetAttributify from unocss/preset-attributify;
import presetUno from unocss/preset-uno;
import transformDirective from unocss/transformer-directives;export default defineConfig({presets: [presetAttributify(), presetUno()],transformers: [transformDirective()], // apply
});在页面style/style中使用
//layout/index.vue
templatediv classapp-wrapperdiv classsidebar-container侧边导航/divdiv classmain-containerdiv classheaderdiv classnavbar导航条1/divdiv classtags-view导航条2/div/divdiv classapp-mainrouter-view/router-view/div/div/div
/template
style langscss
.app-wrapper {apply text-red w-full h-full;
}
/style效果如下 2.4 清除默认样式
现在项目中还存在一些默认样式为了避免对后续样式的影响需要对这些默认样式进行清除这里我们使用 pnpm 安装 Normalize.css 插件来清除默认样式 Normalize.css是一个现代的CSS重置方案旨在提高网页在不同浏览器中的样式一致性。它保留有用的浏览器默认样式同时修复常见浏览器间的差异和bug确保HTML元素在多种环境下表现一致。与传统的CSS Reset不同Normalize.css更加细腻专注于提升可用性和可访问性适用于追求一致性和标准化的项目。它被广泛用于众多框架和网站如Twitter Bootstrap和HTML5 Boilerplate是现代网页开发的必备工具。 pnpm install normalize.css 在 main.ts 中引入 //main.ts
import { createApp } from vue;
import App from ./App.vue;import router from ./router;
import normalize.css/normalize.css;
import { createPinia } from pinia;
import ElementPlus from element-plus;
import element-plus/dist/index.css;
import uno.css;
const app createApp(App);
const pinia createPinia();app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount(#app);引入后可以看见默认的样式已经清除空隙等 2.5 完善 layout 样式
完善 layout.vue 的样式
//layout.vue
templatediv classapp-wrapperdiv classsidebar-container侧边导航/divdiv classmain-containerdiv classheaderdiv classnavbar导航条1/divdiv classtags-view导航条2/div/divdiv classapp-mainrouter-view/router-view/div/div/div
/template
style langscss
.app-wrapper {apply flex w-full h-full;.sidebar-container {apply bg-red w-[210px];}.main-container {apply flex flex-col flex-1;}.header {apply h-84px;.navbar {apply h-50px bg-yellow;}.tags-view {apply h-34px bg-blue;}}.app-main {apply bg-cyan;min-height: calc(100vh - 84px);}
}
/style效果如下 2.6 提取公共变量
Vite 支持 Css Modules使用起来非常简单它允许你将 CSS 类名局部化从而避免全局冲突。在 Vite 中使用 Css Modules 的步骤大致如下 命名 CSS 文件CSS Modules 要求你的样式文件以 .module.css 为后缀。例如如果你有一个名为 styles.css 的文件你需要将其重命名为 styles.module.css。 编写 CSS在 styles.module.css 文件中你可以像往常一样编写 CSS。 组件中导入和使用在你的组件中你可以导入这个 CSS 文件Vite 会自动将其识别为 CSS Modules。然后你可以像使用对象一样使用这些样式。 在 src 下新建文件夹 style新建文件 variables.module.scss提取公共变量scss 中声明好的变量在 js 中也可以使用。
//variable.module.scss
$sideBarWidth: 210px;
$navBarHeight: 50px;
$tagsViewHeight: 34px;
在 style 下创建 index.scss 文件引入 variables.modules.scss在:root 中定义 css 的变量
//index.scss
//import ./variables.module.scss; 弃用
use ./variables.module.scss as *;:root {--sidebar-width: #{$sideBarWidth};--navbar-height: #{$navBarHeight};--tagsview-height: #{$tagsViewHeight};
} 在 main.ts 中引入 index.scss //main.ts
import { createApp } from vue;
import App from ./App.vue;import router from ./router;
import normalize.css/normalize.css;
import { createPinia } from pinia;
import ElementPlus from element-plus;
import element-plus/dist/index.css;
import /style/index.scss;
import uno.css;
const app createApp(App);
const pinia createPinia();app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount(#app);修改 layout.vue 中相关 css 的值
//layout.vue
templatediv classapp-wrapperdiv classsidebar-container侧边导航/divdiv classmain-containerdiv classheaderdiv classnavbar导航条1/divdiv classtags-view导航条2/div/divdiv classapp-mainrouter-view/router-view/div/div/div
/template
style langscss
.app-wrapper {apply flex w-full h-full;.sidebar-container {apply bg-red w-[var(--sidebar-width)];}.main-container {apply flex flex-col flex-1;}.header {apply h-84px;.navbar {apply h-[var(--navbar-height)] bg-yellow;}.tags-view {apply h-[var(--tagsview-height)] bg-blue;}}.app-main {apply bg-cyan;min-height: calc(100vh - var(--tagsview-height) - var(--navbar-height));}
}
/style
修改后效果 这样整体布局及大概的样式就设置好了。 下一篇将探讨组件库接入、自动导入配置等内容敬请期待~
