집 > 기사 > 웹 프론트엔드 > elementUI를 사용하여 Vue에서 사용자 정의 테마 메소드 구현

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

亚连원래의: 2018-06-05 09:27:162025검색

아래에서는 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 &#39;../theme/index.css&#39;
import ElementUI from &#39;element-ui&#39;
import Vue from &#39;vue&#39;
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: &#39;../node_modules/element-ui/lib/theme-chalk/fonts&#39;;
@import "../node_modules/element-ui/packages/theme-chalk/src/index";

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

import Vue from &#39;vue&#39;
import Element from &#39;element-ui&#39;
import &#39;./element-variables.scss&#39;
Vue.use(Element)

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

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

관련 기사