Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用

简介: Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用

前言

如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门,快速入门。

github 开源库:Vue3-Vite-Pinia-Naive-Js

gitee   开源库:Vue3-Vite-Pinia-Naive-Js

1. 安装依赖

yarn add sass -D
// or
npm install sass -D

2. 新增 src/assets/style/reset.scss 页面样式初始化

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
// table,
caption,
tbody,
tfoot,
thead,
// tr,
th,
// td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
 
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
 
body {
  line-height: 1;
}
 
ol,
ul {
  list-style: none;
}
 
blockquote,
q {
  quotes: none;
}
 
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
 
// table {
//   border-collapse: collapse;
//   border-spacing: 0;
// }
 
html,
body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica";
}

3. 新增 src/assets/style/common.scss 共用样式

::-webkit-scrollbar {
  width: 14px;
  height: 12px;
  background-color: #fff;
}
 
::-webkit-scrollbar-thumb {
  display: block;
  min-height: 12px;
  min-width: 8px;
  border-radius: 6px;
  background-color: rgb(217, 217, 217);
}
 
::-webkit-scrollbar-thumb:hover {
  display: block;
  min-height: 12px;
  min-width: 8px;
  border-radius: 6px;
  background-color: rgb(159, 159, 159);
}

4. 新增 src/assets/style/utils.scss 工具样式

.u__border {
  border: 1px solid;
}
 
.u__flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.u__ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.u__ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.u__ellipsis-auto {
  position: relative;
  line-height: 1.4em;
  height: 2.8em; /* 这里的高度是line-height的两倍 */
  overflow: hidden;
  &::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 5px 1px 30px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%)
      repeat scroll 0 0 rgba(0, 0, 0, 0);
  }
}

5. 新增 src/assets/style/index.scss scss样式集合

@import "./reset.scss";
@import "./common.scss";
@import "./utils.scss";

6. 编辑 vite.config.js  使用 @ 快捷键

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
 
import { resolve } from "path";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
});

7. 编辑 src/main.js 引入 src/assets/style/index.scss

import { createApp } from "vue";
import App from "./App.vue";
 
import "@/assets/style/index.scss";
 
createApp(App).mount("#app");

8. 编辑 src/App.vue 使用 scss

<script setup></script>
 
<template>
  <div class="demo">
    <div>yqcoder</div>
  </div>
</template>
 
<style scoped lang="scss">
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  div {
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
}
</style>

综上

scss安装完成。下一章:Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用


目录
相关文章
|
30天前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
133 0
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
104 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
72 0
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
423 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
598 4
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
427 77
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
305 17
|
3月前
|
监控 JavaScript 前端开发
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式:**前端打包方案(基于file-saver和jszip)** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载,适合小文件场景;后者由后端生成ZIP文件流返回,适用于大文件或大量文件下载。同时,提供了可复用的Vue组件`BatchDownload`,支持进度条、失败提示等功能。此外,还扩展了下载进度监控和断点续传等高级功能,并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
301 17