手把手自定义组件库 -- CSS和SASS

初始化CSS

安装

npm i normalize.css -S

引入

import { createApp } from "vue";

import { createPinia } from "pinia";

import "normalize.css";

import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

SASS

安装

npm i sass -D

引入element-plus

安装

npm install element-plus  --save

引入elementui-plus

import { createApp } from "vue";

import { createPinia } from "pinia";

import "normalize.css";

import ElementPlus from "element-plus";

import "element-plus/dist/index.css";

import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(createPinia());
app.use(router);
app.use(ElementPlus);
app.mount("#app");

安装 elementuiplus 图标

npm install @element-plus/icons-vue

全局引入图标

• utils/tools.ts

// 将字符串中的大写字母替换为小写字母，并在其前面加上一个连字符
export const toLine = (str: string) => {
    return str.replace(/([A-Z])/g, '-$1').toLowerCase()
}

• main.ts

// 引入icons
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { toLine } from '@/utils/tools'
// 全局注册组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(`el-icon${toLine(key)}`, component)
}

组件使用

<template>
  <div>
    {{ message }}
    <el-button type="primary">Primary</el-button>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const message = ref("登录页");
</script>

<style lang="scss" scoped></style>