vue.js3: 使用全局css样式文件(vue@3.2.37)

一，创建全局css文件

创建global.css文件，保存全局样式,如图:

 

global.css的代码:

.titleDiv {
    width:800px;
    text-shadow: 2px 2px 5px #777;
    line-height: 22px;
    font-size: 22px;
    color: rgb(90, 90, 90);
    margin-top: 20px;
}

.mainDiv {
    width:800px;
    margin: auto;
}

.panel {
    border-color:#eeeeee;
    border-radius:10px;
    border-style:solid;
    border-width:1px;
    width:800px;
    background:rgb(250,250,250);
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 10px;
}

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-shi-yong-quan-ju-css-yang-shi-wen-jian-vue-3-2-37/

对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，main.js中引入样式:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//element-plus 的中文化
import locale from 'element-plus/lib/locale/lang/zh-cn' 
//element-plus 的icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//引入css公共样式
import '../public/static/css/global.css' 
//启动app
const app = createApp(App)

// 全局注册el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(router)
app.use(ElementPlus,{locale})
app.mount('#app')

三，使用样式

Base64.vue

<template>
<div >
  <div class="mainDiv">
  <div class="titleDiv" style="line-height: 24px;font-size: 24px;color: #777;margin-top: 20px;">
    BASE64编码/解码
  </div>
  <div class="panel" style="">

    <div style="margin-left:30px;display: flex;flex-direction: row;margin-top:20px;margin-bottom:20px;">
    <el-input
        ref="plain"
        v-model="plainText"
        :rows="9"
        type="textarea"
        placeholder="请输入要做base64编码的文本"
        style="width:300px;"
    />
    <div style="width:140px;">
    <el-button type="info" plain @click="encode">BASE64编码&gt;</el-button>
    <el-button type="info" plain style="margin-top: 20px;margin-left: 0px;" @click="decode">&lt;BASE64解码</el-button>
    </div>
    <el-input
        ref="base64"
        v-model="base64Text"
        :rows="9"
        type="textarea"
        placeholder="经过base64编码的文本"
        style="width:300px;"
    />
    </div>
  </div>
  </div>
</div>
</template>

四，测试效果

 

五，查看vue框架的版本: 

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped