Vue의 elementUI는 사용자 정의 테마를 구현합니다.
- 小云云원래의
- 2018-02-24 09:45:192857검색
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 파일에서 변수를 변경하면 됩니다.
관련 권장 사항:
위 내용은 Vue의 elementUI는 사용자 정의 테마를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!