elementUI를 사용하여 Vue에서 사용자 정의 테마 메소드를 구현하는 방법
- 亚连원래의
- 2018-06-04 17:40:492269검색
아래에서는 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 vue3, webpack
npm i -g vue-cli4를 기반으로 새 프로젝트(vue-project)를 빌드하고 다음 명령을 순서대로 입력합니다. 확인, vue-project
vue init webpack vue-project
2를 실행합니다. elementUI, sass-loader, node-sass(scss를 사용하여 프로젝트에 종속 플러그인 작성)
1, install element-uicd vue-project npm i npm run dev2, install sass-loader, node-sass
npm i element-ui -SLet me 여기서는 webpack.base.conf.js 파일을 구성할 필요가 없습니다. vue-loader는 스타일 파일을 패키징하기 위해 다양한 유형의 파일에 따라 해당 로더를 구성합니다. vue-loader의 핵심 코드를 보세요)
3. 요소 스타일 변수 변경
1. src 아래에 element-variables.scss 파일을 만들고(이름은 사용자 정의 가능) 다음 코드를 작성합니다.npm i sass-loader node-sass -D2. 위 파일을 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 파일에서 변수를 변경하면 됩니다. 위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:
ngrok+express를 사용하여 WeChat 인터페이스 디버깅 문제를 해결하는 방법
vue-cli를 사용하여 vue 플러그인을 작성하는 방법
위 내용은 elementUI를 사용하여 Vue에서 사용자 정의 테마 메소드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!