elementUI를 사용하여 Vue에서 사용자 정의 테마 메소드 구현

아래에서는 Vue의 elementUI를 사용하여 사용자 정의 테마를 구현하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue를 사용하여 프로젝트 및 elementUI를 개발합니다. 공식 웹사이트의 작성 방법에 따라 프로젝트 요구 사항에 맞게 테마를 사용자 정의할 수 있습니다. 다음은 두 가지 방법을 구현하는 구체적인 단계입니다. 문서를 사용자 정의 테마 공식 문서 ) 우선 프로젝트는 scss를 사용하여 작성되지 않고 테마 도구 방법이 사용됩니다(더 일반적으로 사용됨)

첫 번째 방법: 명령줄 테마 도구 사용

vue-cli를 이용하여 프로젝트를 설치하고 -ui 요소를 소개합니다. (자세한 내용은 두 번째 방법 소개를 참고하세요.)

1. 설치 도구

1. 테마 도구 설치

npm i element-theme -g

2. chalk 테마는 npm에서 설치하거나 GitHub 코드에서 최신 버전을 가져올 수 있습니다.

# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

2. 변수 파일을 초기화합니다.

et -i [可以自定义变量文件，默认为element-variables.scss]
> ✔ Generator variables file

이때, element-variables.scss(또는 사용자 정의 파일)가 생성됩니다.

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;
...

3. 변수를 수정합니다.

element-variables.scss 파일을 직접 편집합니다. 예를 들어 테마 색상을 필요한 색상(예: 보라색)으로 변경합니다. )

$--color-primary: purple;

넷. 테마 컴파일

변수 수정 후 테마 컴파일(컴파일 후 변수가 다시 수정되면 다시 컴파일해야 함)

et
> ✔ build theme font
> ✔ build element theme

5. 커스텀 테마 소개

마지막 단계는 컴파일된 테마 파일을 프로젝트에 도입하는 것입니다(컴파일된 파일은 기본적으로 루트 디렉터리에 있습니다). 테마 파일에서 -o 매개변수를 통해 패키징 디렉터리를 지정할 수도 있습니다.

항목 파일 main.js에 프로젝트에 몇 가지 스타일을 작성하여 테마 색상이 변경되는지 확인합니다. (테마 색상이 보라색으로 변경됨)

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)

두 번째 방법: 요소 스타일 변수를 직접 수정

직접 수정 프로젝트에서 요소의 스타일 변수를 수정합니다(문서도 scss를 사용하여 작성된 경우)

1. 먼저 vue-cli를 사용하여 설치 새 프로젝트:

1, vue 설치:

<p>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 </p>

2, 설치 프로젝트 디렉터리의 vue-cli:

npm i -g vue

3, webpack

npm i -g vue-cli

4를 기반으로 새 프로젝트(vue-project)를 빌드하고 다음 명령을 순서대로 입력합니다. 확인, vue-project

vue init webpack vue-project

2를 실행합니다. elementUI, sass-loader, node-sass(scss를 사용하여 프로젝트에 종속 플러그인 작성)

1, install element-ui

cd vue-project
npm i
npm run dev

2, install sass-loader, node-sass

npm i element-ui -S

Let me 여기서는 webpack.base.conf.js 파일을 구성할 필요가 없습니다. vue-loader는 스타일 파일을 패키징하기 위해 다양한 유형의 파일에 따라 해당 로더를 구성합니다. vue-loader의 핵심 코드를 보세요)

3. 요소 스타일 변수 변경

1. src 아래에 element-variables.scss 파일을 만들고(이름은 사용자 정의 가능) 다음 코드를 작성합니다.

npm i sass-loader node-sass -D

2. 위 파일을 main.js

/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index";

항목 파일로 가져오고 효과를 확인하세요. 버튼과 같은 일부 스타일을 파일에 추가하세요.

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)

기본 색상이 사용자 정의된 색상으로 변경되었습니다. 다른 변경 사항은 element-variable.scss 파일에서 변수를 변경하면 됩니다. 위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js 동적에서 태그 생성 및 속성 메서드 설정(자세한 튜토리얼)

jQuery에서 태그 하위 요소의 추가 및 할당 메서드 구현

jQuery Label에서 P를 변경하는 방법 텍스트 값

위 내용은 elementUI를 사용하여 Vue에서 사용자 정의 테마 메소드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!