标签：scss index ElementPlus ts element vue plus vue3 import
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。