vue3后台管理框架之全局配置element-plus11111 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

前言

本篇主要介绍集成element-plus，主要包括全量引入，部分引入，element-plus一些常用配置等

element-plus官方文档

我们先看看element-plus介绍 —– 基于 Vue 3，面向设计师和开发者的组件库

安装依赖

pnpm add element-plus@2.2.19 -S

配置

完整引入#

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
    import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'

    const app = createApp(App)

    app.use(ElementPlus)
    app.mount('#app')

测试


import { Check } from '@element-plus/icons-vue'
console.log('111')



    
        朱啊
        11111
    



.box {
    width: 200px;
    height: 200px;
    background-color: beige;

    h1 {
        color: red;
    }
}

入口文件main.ts全局安装element-plus,element-plus默认支持语言英语设置为中文

import ElementPlus from 'element-plus';
  import 'element-plus/dist/index.css'
  //@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)
  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  app.use(ElementPlus, {
  locale: zhCn
  })

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
import z服务器托管网hCn from 'element-plus/dist/locale/zh-cn.mjs'

Element Plus全局组件类型声明

// tsconfig.json
    {
    "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
    }
    }

配置完毕可以测试element-plus组件与图标的使用.

找不到“element-plus/global”的类型定义文件。程序包含该文件是因为: 在 compilerOptions 中指定的类型库 “element-plus/global”

这时尝试添加declare module “element-plus”;无果，该方法参考ts文件说明

可以修改tsconfig.json文件下的moduleResolution的bundler为node，等待几秒或者重启vscode即可

按需导入

您需要使用额外的插件来导入要使用的组件。

自动导入(推荐)

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

pnpm add -D unplugin-vue-components unplugin-auto-import

// vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport 服务器托管网from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

注：按需导入目前发现会影响dev环境首次页面加载速度，目前框架中使用完整引入

手动导入

当然你还可以手动导入这里就不多说了

element-plus手动导入

element-plus全局配置

管方提供了配置组件 ElConfigProvider ，那么所有的全局配置，都可以在这里设置

配置全局size ，官方提供了三种， small , default(默认), large 少了 mini

配置国际化语言



  
    
  


import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
let locale = $ref(zhCn);

通过 locale 变量配置国际化语言

其他语言，可通过 element-plus国际化语言获取

修改命名空间

如配置了namespace=”ep”，那么变量前缀 el- 就变成了 ep- 如变量：el-button–small -> ep-button–small

关于命名空间和主题色，我们在主题色篇讲解

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

前言