我们在 [@vue/cli 项目初始化起手式: https://www.jianshu.com/p/85bfa31709c7 ] 文档里已经完成了项目的初始化,包括 element-ui 的安装引入, 本文注重介绍如何使用 element-ui.
初始化项目的原生 css 样式
- 格式化 html 原生标签的默认样式
(1). 在 public 目录下 新建 目录 styles/base.css, 并在 public/index.html 全局引入
(2). 去GitHub上搜 reset css 然后选个star比较高的就能满足我们的需求了。
我们打开对应的 normalize.css 文件,并把内容复制下来。
(3). 把步骤二复制的css代码粘贴到步骤一创建的 base.css 中, base.css 可以根据项目的实际情况进行修改
- 也可以在 src 目录下新增 styles 文件夹,在main.js文件中引入(这样可以解析less,sass,stylus等预编译的样式)
初始化 element 的默认主题样式
参考文档: https://element.eleme.cn/#/zh-CN/component/custom-theme
- 在 src/assets 目录下新增文件 element-variables.scss, 由于 element 默认使用 scss 预编译器写的,所以这里用 scss 就可以直接修改 scss 的变量值, 该文件写入
/*
* 本文件专用修改 element-ui 默认的 scss 样式变量
* 下面是 element 的 scss 变量管理文件目录
* node_modules\element-ui\packages\theme-chalk\src\common\var.scss
*/
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
(2). 在 main.js 里引入修改后的 主题样式, 并把引入默认的主题去掉, 如图所示
import.png(3). 示例
# element-variables.scss
/* 改变主题色变量 */
$--color-primary: blue;
# 组件里调用, 显示入下图
<el-button type="primary">主要按钮</el-button>
demo-btn.png
搭建页面框架
可以利用elelment封装好的container组件组合的搭建,也可以自己手动搭建
- element container 组件搭建
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
container.png
- 手动搭建
更具体的代码参考Git
<template>
<div class='apps'>
<div class="sidebar">
<Menus/>
</div>
<div class="subject">
<div class="header">
<Header/>
</div>
<div class="main" ref="adminLayout_main">
<router-view/>
</div>
</div>
</div>
</template>
手动.png
使用 淘宝阿里的 弹性布局方法
amfe-flexible: https://github.com/amfe/lib-flexible
1.安装
npm i -S amfe-flexible
- 按照 Git 的 README.md 还要安装 postcss-adaptive.
npm install postcss-adaptive
- vue.config.js文件中配置 amfe-flexible
css: {
loaderOptions: {
less: {},
postcss: {
plugins: [
require('postcss-adaptive')({
remUnit: 192,
baseDpr: 2,
autoRem: true
/**
* remUnit: number, rem unit value (default: 75)
* baseDpr: number, base device pixel ratio (default: 2)
* remPrecision: number, rem value precision (default: 6)
* hairlineClass: string, class name of 1px border (default 'hairlines')
* autoRem: boolean, whether to transform to rem unit (default: false)
* */
})
]
}
}
- 示例
.header-logo {
width: 100%;
height: 60px;
font-size: 40px;
border: 1px solid red;
}
自动转换成rem单位, 结果如下图
res.png
- ok 搞定
网友评论