Element-ui和vue-element-admin学习

素颜马尾好姑娘i 2021-06-10 20:38 519阅读 0赞

## Element-ui ##

> 什么是Element-ui？

根据官网的说法，Element-ui，是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库。  
官网：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]  
![Element-ui官网][Element-ui]

> 如何使用？

1、创建文件夹element-ui。  
2、下载组件。

npm install vue #安装Vue
    npm i element-ui -S #安装Element-ui

3、为了代码更加清爽，可以将主要依赖vue.min.js和element-ui包放入lib目录中，lib目录需手动创建。  
![lib目录结构][lib]  
4、搭建第一个UI界面入门程序。

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      
      <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
    </head>
    
    <body>
      <div id="app">
        
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
          <p>Try Element</p>
        </el-dialog>
      </div>
    </body>
    
    <script src="./lib/vue.min.js"></script>
    
    <script src="./lib/element-ui/lib/index.js"></script>
    
    <script>
      new Vue({
        el: '#app',
        data: function () {
          return { visible: false }
        }
      })
    </script>
    
    </html>

> 官网基本组件测试

1、容器，拿来即用即可。  
2、图标，el内置了许多图标，使用`icon="iconname"`属性即可使用，也推荐使用[https://fontawesome.dashgame.com/][https_fontawesome.dashgame.com]这个网站中的图标。

<el-button @click="visible = true" icon="el-icon-search">Button</el-button>

![图标集合][format_png]  
3、对于后台程序员来说，大部分情况下都是在对表单进行操作。el几乎内置了开发中会使用的所有表单组件。  
![表单组件][format_png 1]

> 前端怎么写？

对于一些后台开发人员来说，可能会存在开发一个项目不知道怎么开始第一步的问题，其原因大概是：

*  没有清晰的界面定义。
 *  不会设计数据库。

对于第一个问题，Element-ui组件可以直接套用，我们平时可以多去看看其他网站如何设计，借鉴学习。至于第二个问题，其实也是因为第一个问题没解决，当我们把前端写好之后，数据库的结构自然就出来了。解决了这两个问题，剩下的就是后台的CRUD了，这是我们最熟悉的部分。  
编写前端的基本套路：

*  见过足够多的组件，拼接组件，这样就形成了网页的基本形状。
 *  修改CSS即可。

> 设计多级下拉菜单的联动效果

如下图所示，现在要实现第一个下拉框选择不同的选项时，第二个下拉框中的下拉选项也要随之发生变化的效果，这时可以使用级联选择器（cascader）来实现。  
![级联选择器][format_png 2]

<div class="block">
      <span class="demonstration">默认 click 触发子菜单</span>
      <el-cascader
        v-model="value"
        :options="options"
        @change="handleChange"></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"></el-cascader>
    </div>
    
    <script>
      export default {
        data() {
          return {
            value: [],
            options: [{
              value: 'zhinan',
              label: '指南',
              children: [{
                value: 'shejiyuanze',
                label: '设计原则',
                children: [{
                  value: 'yizhi',
                  label: '一致'
                }, {
                  value: 'fankui',
                  label: '反馈'
                }, {
                  value: 'xiaolv',
                  label: '效率'
                }, {
                  value: 'kekong',
                  label: '可控'
                }]
              }, {
                value: 'daohang',
                label: '导航',
                children: [{
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                }, {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }]
              }]
            }
      }

所有的前端弹窗建议都使用layer组件来实现。

## vue-element-admin ##

> 什么是vue-element-admin？

vue-element-admin是一款基于Vue和Element-ui的后台管理的集成解决方案（60%的前后端分离项目都使用它）。  
官网：https://panjiachen.github.io/vue-element-admin-site/zh/  
![vue-element-admin官网][vue-element-admin]

> 如何分析一个前端项目？

1、查看config、index.js，了解项目的基本配置。  
2、查看main.js，了解导入了哪些组件。  
3、查看路由配置文件index.js，寻找到所有的页面组件。  
4、分析页面组件，准备的组件化操作：template/script/style。

> 如何安装？

官网建议我们使用淘宝镜像来安装依赖，否则可能会下载非常慢。

# 克隆项目
    git clone https://github.com/PanJiaChen/vue-element-admin.git
    
    # 进入项目目录
    cd vue-element-admin
    
    # 安装依赖
    npm install
    
    # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
    npm install --registry=https://registry.npm.taobao.org
    
    # 本地开发 启动项目
    npm run dev

> 使用方法

1、vue-element-admin是一个完整的后台脚手架，在平时开发的时候，把它当成一个工具库来使用，需要什么组件我们拿来使用即可。  
2、推荐使用vue-admin-template来进行开发。  
3、开发的步骤大概可以分为：

*  编写自己的组件。
 *  注册路由。
 *  和后台API进行通信和传输数据。

[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN
[Element-ui]: /images/20210607/2e1f343a19914919b01fb2967f7d51b7.png
[lib]: /images/20210607/cef3982d61e740f08611665ebb748f5e.png
[https_fontawesome.dashgame.com]: https://fontawesome.dashgame.com/
[format_png]: /images/20210607/321caa11cbd946b19faa31ff3e11b06d.png
[format_png 1]: /images/20210607/cf756b65025d4c5da9c2ecd050f5c142.png
[format_png 2]: /images/20210607/1cfefde1d8f0401da56ecc6baffcfdb3.png
[vue-element-admin]: /images/20210607/e4f677dd25e94d24bbb94bd36e182d92.png