其他分享
首页 > 其他分享> > vue3+ts项目引入ElementPlus并设置主题

vue3+ts项目引入ElementPlus并设置主题

作者:互联网

1、介绍:vue3+ts项目引入ElementPlus的方式有几种,一个是完整引入,一个是官方推荐的自动导入,最后一个是手动导入

2、实操:这里展示前面两种,最后的手动导入不是很推荐,这里就不介绍了

2-1、完整引入,官方案例:element-plus-vite-starter

引入ElementPlus
$ npm install element-plus --save
main.ts引入完整版,并设置默认大小和国际语言(默认英语),并引入配置的global.scss(引用global.scss要在引入的ElementPlus样式后面,不然会被覆盖)
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import "./styles/global.scss";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.use(ElementPlus, { size: 'small', locale: zhCn })
app.mount('#app')
在global.scss里的:root里设置变量的样式就可以覆盖了
:root {
  --el-color-primary: red;
}
也可以用scss直接覆盖,这种的话就是说你用scss新写样式覆盖原本的样式合成一个新的scss文件导入main.ts里面,不用import 'element-plus/dist/index.css'了
// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;
导入main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import "./styles/element/index.scss";
//import 'element-plus/dist/index.css'
import "./styles/global.scss";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.use(ElementPlus, { size: 'small', locale: zhCn })
app.mount('#app')

2-2、按需引入,官方案例:unplugin-element-plus/examples/vite

引入ElementPlus
$ npm install element-plus --save
还需要安装几个插件unplugin-vue-components,unplugin-auto-import,unocss
npm install -D unplugin-vue-components unplugin-auto-import unocss
在vite.config.ts里引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Unocss from 'unocss/vite'
import {
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"],
      resolvers: [ElementPlusResolver()],
      dts: "src/autoImport.d.ts"
    }),
    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
      dts: 'src/components.d.ts',
    }),
    Unocss({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
          scale: 1.2,
          warn: true,
        }),
      ],
      transformers: [
        transformerDirectives(),
        transformerVariantGroup(),
      ]
    }),],
  server: {
    host: "0.0.0.0",
  },
})
新建一个scss文件配置主题
// styles/element/index.scss
$--colors: (
  "primary": (
    "base": red,
  ),
  "success": (
    "base": #21ba45,
  ),
  "warning": (
    "base": #f2711c,
  ),
  "danger": (
    "base": #db2828,
  ),
  "error": (
    "base": #db2828,
  ),
  "info": (
    "base": #42b8dd,
  ),
);


// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  // do not use same name, it will override.
  $colors: $--colors
);

// if you want to import all
// @use "element-plus/theme-chalk/src/index.scss" as *;

// You can comment it to hide debug info.
// @debug $--colors;

// custom dark variables
@use "./dark.scss";
// import dark theme
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
再建一个暗黑主题在index引用
// styles/element/dark.scss
$--colors: (
  "primary": (
    "base": #589ef8,
  ),
);

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors: $--colors
);
在src路径下建立一个文件夹放vueuse这个库切换暗黑模式主题的方法
//composables/index.ts
export * from './dark'
//composables/dark.ts
import { useDark, useToggle } from '@vueuse/core'

export const isDark = useDark()
export const toggleDark = useToggle(isDark)
然后在页面引用就可以看到效果了
<script setup lang="ts">
import { toggleDark } from '../composables';
</script>
    <el-button @click="toggleDark()">切换</el-button>
按需引入还有个好玩的是自命名空间,就是可以把element里面的el改成你想自定义的名称,先引入@types/node
npm install --save @types/node
在vite.config.ts里补充以下内容,注意引入path和__dirname的时候可能会提示报错,需要重新安装依赖或者重启vsCode
...
import path from 'path' const pathSrc = path.resolve(__dirname, 'src') export default defineConfig({ resolve: { alias: { '~/': `${pathSrc}/`, }, }, plugins: [...], server: { host: "0.0.0.0", }, css: { preprocessorOptions: { scss: { additionalData: `@use "~/styles/element/index.scss" as *;`, }, }, }, })
在// styles/element/index.scss里面补充
// we can add this to custom namespace, default is 'el'
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
  $namespace: "wj"
);
最后去到App.vue里面套一层ConfigProvider组件,填上自定义名称,并补充上默认组件大小和语言
<script setup lang='ts'>
import { ref } from 'vue'
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const locale = ref(zhCn)
</script>
<template>
<el-config-provider namespace="wj" :locale="locale" size="small">
  <img alt='Vue logo' src='./assets/logo.png' />
  <HelloWorld msg='Hello Vue 3 + TypeScript + Vite' />
</el-config-provider>
</template>

 

标签:scss,index,ElementPlus,ts,element,vue,plus,vue3,import
来源: https://www.cnblogs.com/lovewhatIlove/p/16389787.html