element-ui 初始化页面框架

我们在 [@vue/cli 项目初始化起手式: https://www.jianshu.com/p/85bfa31709c7 ] 文档里已经完成了项目的初始化，包括 element-ui 的安装引入， 本文注重介绍如何使用 element-ui.

初始化项目的原生 css 样式

1. 格式化 html 原生标签的默认样式
   (1). 在 public 目录下 新建 目录 styles/base.css, 并在 public/index.html 全局引入
   （2). 去GitHub上搜 reset css 然后选个star比较高的就能满足我们的需求了。
   我们打开对应的 normalize.css 文件，并把内容复制下来。

init search css.png

(3). 把步骤二复制的css代码粘贴到步骤一创建的 base.css 中， base.css 可以根据项目的实际情况进行修改

2. 也可以在 src 目录下新增 styles 文件夹，在main.js文件中引入(这样可以解析less,sass,stylus等预编译的样式)

初始化 element 的默认主题样式

参考文档： https://element.eleme.cn/#/zh-CN/component/custom-theme

1. 在 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组件组合的搭建，也可以自己手动搭建

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

2. 手动搭建

更具体的代码参考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

2. 按照 Git 的 README.md 还要安装 postcss-adaptive.

npm install postcss-adaptive

3. 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)
            * */
          })
        ]
      }
    }

4. 示例

.header-logo {
    width: 100%;
    height: 60px;
    font-size: 40px;
    border: 1px solid red;
  }

自动转换成rem单位， 结果如下图

res.png

5. ok 搞定