1. 먼저 명령을 사용하여 설치
npm install element-plus --save
2. 필요에 따라 다른 두 플러그인을 설치합니다.
npm install -D unplugin-vue-components unplugin-auto-import
3. vite.config.js 파일에 다음 내용을 입력합니다.
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
이때 App.vue에 버튼 버튼이 도입되며 효과는 다음과 같이 볼 수 있으며 도입에 성공합니다.
4. 위에서 언급한 음색을 사용하지 않으려면 다음과 같이 사용자 정의 작업을 수행해야 합니다.
scss 설치
npm i sass -D(-D는 개발 환경에 설치된 종속성을 나타냄)
사용자 지정 스타일 파일 준비(스타일 파일에 요소 파일 생성 및 그 아래 index.scss 파일 생성)
스타일/요소/index.scss
//index.scss内容
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors:(
"primary":(
"base":#27ba9b,
),
"success":(
"base":#1dc779,
),
"warning":(
"base":#ffb302,
),
"danger":(
"base":#e26237,
),
"error":(
"base":#cf4444,
),
)
)
Sass 스타일 색상 일치 시스템을 사용하도록 elementPlus 구성
스타일 커버리지를 위해 사용자 지정 스타일 파일을 자동으로 가져옵니다.
vite.config.js 파일에서
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
// 配置elementPlus采用sass样式配色系统
resolvers: [ElementPlusResolver({ importStyle: "sass" })],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 自动导入定制化样式文件进行样式覆盖
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/element/index.scss" as *;`
}
}
}
})
구성 파일을 수정한 후 다시 시작하는 것을 잊지 마십시오~
스타일은 다음과 같습니다. 공식 웹사이트 스타일과 비교하여 중요한 변경 사항이 있으며 이는 작동함을 증명합니다.