Vue의 elementUI는 사용자 정의 테마를 구현합니다.

vue를 사용하여 프로젝트 및 elementUI를 개발합니다. 공식 웹사이트의 작성 방법에 따라 프로젝트 요구 사항에 맞게 테마를 사용자 정의할 수 있습니다. 두 가지 방법을 구현하는 구체적인 단계는 다음과 같습니다(공식 문서를 참조할 수 있습니다). 테마 공식 문서를 사용자 정의하기 위해) 먼저 프로젝트는 scss를 사용하여 작성하지 않고 테마 도구 방법(더 일반적으로 사용됨)을 사용한다고 말씀드리겠습니다.

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

vue 사용 -cli 프로젝트 설치 및 element-ui 소개(구체적으로 두 번째 방법의 소개를 참조하세요)

1. 도구 설치

1. 테마 도구 설치

npm i element-theme -g

2에서 설치할 수 있습니다. 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;

4. 변수를 수정한 후 컴파일합니다. 테마(컴파일 후 변수가 다시 수정되면 다시 컴파일해야 함)

et
> ✔ build theme font
> ✔ build element theme

다섯. 소개 테마 사용자 정의

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

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

프로젝트에 일부 스타일을 작성하고 테마 색상이 변경되는지 확인하세요. 색상이 보라색으로 변경)

<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>

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

프로젝트에서 요소의 스타일 변수를 직접 수정합니다. (전제 문서도 scss를 사용하여 작성되었습니다.)

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

1, vue 설치:

npm i -g vue

2, 프로젝트 디렉토리

npm i -g vue-cli

3에 vue-cli 설치, Webpack 기반으로 새 프로젝트(vue-project)

vue init webpack vue-project

4를 생성합니다. 라인을 순서대로 실행하고 vue-project

cd vue-project
npm i
npm run dev

2를 실행합니다. elementUI 및 sass-loader, node-sass를 설치합니다(프로젝트에 종속 플러그인을 작성하려면 scss를 사용하세요)

1, element-ui

npm i element-ui -S

2 설치, 설치 sass-loader, node-sass

npm i sass-loader node-sass -D

여기서 이야기하겠습니다. webpack.base.conf.js 파일을 구성할 필요가 없습니다. vue-loader는 다양한 유형의 파일을 기반으로 해당 로더를 구성합니다. 스타일 파일을 패키징합니다. (관심이 있다면 vue-loader의 핵심 코드를 살펴볼 수 있습니다.)

3. 요소 스타일 변수 변경

1. src 아래에 element-variables.scss 파일을 만듭니다(이름 ), 다음 코드를 작성하세요.

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

2. 위 파일을 main.js에 추가하세요

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

기본 색상과 같은 몇 가지 스타일을 파일에 추가해 보세요. 버튼

<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>

다른 변경 사항은 element-variable.scss 파일에서 변수를 변경하면 됩니다.

관련 권장 사항:

elementui의 기본 스타일 수정 방법 공유

vue 2.0 및 elementUI 구현 이동 경로 탐색 모음 메소드 코드

는 vue+elementUI 부분을 사용하여 구성 요소의 구현 메소드를 소개합니다

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