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 的安装和使用


目录
相关文章
|
4天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
23 6
|
1天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
13 0
|
1天前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
13 0
|
1天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
10 1
|
1天前
|
资源调度 JavaScript 测试技术
vite+vue3+ts从0到1搭建企业级项目(1)
vite+vue3+ts从0到1搭建企业级项目
15 0
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的乡村养老服务管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的乡村养老服务管理系统附带文章源码部署视频讲解等
20 5
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
14 5
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的西安旅游系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的西安旅游系统附带文章源码部署视频讲解等
14 4
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的网上商品订单转手系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的网上商品订单转手系统附带文章源码部署视频讲解等
22 0

相关实验场景

更多