美文网首页
element-ui 初始化页面框架

element-ui 初始化页面框架

作者: 东方三篇 | 来源:发表于2021-02-04 11:53 被阅读0次

    我们在 [@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 可以根据项目的实际情况进行修改
    
    1. 也可以在 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
    1. 手动搭建

    更具体的代码参考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
    
    1. 按照 Git 的 README.md 还要安装 postcss-adaptive.
    npm install postcss-adaptive
    
    1. 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)
                * */
              })
            ]
          }
        }
    
    1. 示例
    .header-logo {
        width: 100%;
        height: 60px;
        font-size: 40px;
        border: 1px solid red;
      }
    

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


    res.png
    1. ok 搞定

    相关文章

      网友评论

          本文标题:element-ui 初始化页面框架

          本文链接:https://www.haomeiwen.com/subject/scgqtltx.html