1.使用ElementUI搭建前端系统框架一

Bertha 。 2023-07-07 03:43 223阅读 0赞

前后端分离系统需要分别建设前端和后端系统，前端系统通常使用VUE与一个前端框架开发比较容易实现，有实力的技术团队通常开发自己的前端框架，使用一些开源的前端框架开发效率更高，比如ElementUI、EasyUI、LayUI、Bootstrap等。本文使用ElemetUI框架搭建前端开发系统。

参考 https://blog.csdn.net/qixiang\_chen/article/details/104359827  
使用webpack创建一个前端VUE项目

安装文档描述创建VUE项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]  
如果第一次创建，下载chromedriver.exe需要较长时间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]  
按照提示，将命令行转移到gfvue,执行npm run dev即可启动前台项目

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]  
前台项目默认端口是：8080  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]  
上述是使用webpack创建空的vue前端项目，项目结构都是完整的，我们在此基础上进一步细化修改代码，将这个前端空的项目修改为符合我们要求的前端项目。

开发前端项目有很多工具，在此选择Visual Code工具，下载VScode并安装

链接：https://pan.baidu.com/s/1dBjsbuOfSXw3Agl12sANgw  
提取码：i207

刚才使用webpack创建的空项目，可以通过云盘下载，通常自己都可以创建成功，大约200M左右。

链接：https://pan.baidu.com/s/1fmR94MuGk7BjAA0rGkAiFA  
提取码：pl4p

## 修改前端项目依赖组件 ##

使用VScode打开刚才创建的gfvue项目，如下图，使用Open Folder，选择项目所在目录，比如d:/gfvue即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 5]  
在根目录下有配置文件package.json，相当于Maven项目的POM.xml文件，我们可以配置前端项目运行时依赖的组件和开发时依赖的组件，前端项目有很多通用功能的组件，可以直接引入使用，就像Maven项目的Jar包一样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 6]  
引入这些运行时和开发时依赖组件

mockjs
    生成随机数据，拦截 Ajax 请求。
    
    area-data
    行政区域地址
    
    echarts
    图表组件
    
    element-ui
    前端UI框架
    
    js-cookie
    JS操作Cookie组件
    
    lodash
    Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单
    
    moment
    非常实用的日期工具类
    
    nprogress
    顶部进度条
    
    vue
    vue类库
    
    vue-area-linkage
    省市区联动选择
    
    vue-i18n
    前端国际化
    
    vue-router
    vue路由
    
    vuex
    Vue.js 应用程序开发的状态管理模式

package.json文件

{
      "name": "gfvue",
      "version": "1.0.0",
      "description": "gfvue",
      "author": "qixiang_chen@aliyun.com <qixiang_chen@aliyun.com>",
      "private": true,
      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "unit": "jest --config test/unit/jest.conf.js --coverage",
        "e2e": "node test/e2e/runner.js",
        "test": "npm run unit && npm run e2e",
        "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
        "build": "node build/build.js"
      },
      "dependencies": {
        "area-data": "^5.0.6",
        "axios": "^0.18.0",
        "echarts": "^4.1.0",
        "element-ui": "^2.3.8",
        "js-cookie": "^2.2.0",
        "lodash": "^4.17.10",
        "mockjs": "^1.0.1-beta3",
        "moment": "^2.24.0",
        "nprogress": "^0.2.0",
        "vue": "^2.5.2",
        "vue-area-linkage": "^5.1.0",
        "vue-i18n": "^7.3.2",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-eslint": "^8.2.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-jest": "^21.0.2",
        "babel-loader": "^7.1.1",
        "babel-plugin-dynamic-import-node": "^1.2.0",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-plugin-transform-vue-jsx": "^3.5.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chalk": "^2.0.1",
        "chromedriver": "^2.27.2",
        "copy-webpack-plugin": "^4.0.1",
        "cross-spawn": "^5.0.1",
        "css-loader": "^0.28.0",
        "eslint": "^4.15.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^5.2.0",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-vue": "^4.0.0",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "jest": "^22.0.4",
        "jest-serializer-vue": "^0.3.0",
        "nightwatch": "^0.9.12",
        "node-notifier": "^5.1.2",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "portfinder": "^1.0.13",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "postcss-url": "^7.2.1",
        "rimraf": "^2.6.0",
        "selenium-server": "^3.0.1",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "url-loader": "^0.5.8",
        "vue-jest": "^1.0.2",
        "vue-loader": "^13.3.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0",
        "node-sass": "^4.13.0",
        "sass-loader": "^7.0.1"
      },
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }

引入依赖后，执行npm install下载这依赖组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 7]  
可以执行  
npm install -g node-sass  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 8]

## 修改webpack.base.conf.js配置文件 ##

eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。如果使用eslint，开发过程中语法校验非常苛刻，最好关闭它，关闭eslint校验需要修改webpack.base.conf.js文件，注释掉这行配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 9]  
定义目录结构的别名，在代码中可以使用别名定位文件或资源  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 10]  
VUE项目入库方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 12]  
也可以通过这种方式启动VUE实例  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 13]

## 配置ElementUI支持 ##

配置CSS文件，同时引入ElementUI定义的配置文件，新建目录src/assert/css,并引入这三个SCSS文件，Sass是成熟、稳定、强大的CSS预处理器。

common.scss

$themeColor: #1890ff !default;
    /* 基础颜色
    -------------------------- */
    $white: #fff !default;
    $lighterGray: #eee !default;
    $lightGray: #ccc !default;
    $neutralGray: #aaa !default;
    $gray: #999 !default;
    $darkGray: #666 !default;
    $darkerGray: #333 !default;
    $red: #d45b5b !default;
    
    
    $headerHeight: 50px !default;
    
    $fontRem: 20px !default;
    $fontSize: 14px !default;
    $fontResponseSize: 1.3rem !default;
    $fontFamily: "Helvetica", "Microsoft Yahei", san-serif !default;
    $fontColor: $darkerGray !default;
    $linkColor: $themeColor !default;
    
    
    $leftNavWidth: 160px !default;
    $leftNavBg: white !default;
    $leftNavBorder: 1px solid $lightGray !default;
    $leftNavColor: $fontColor !default;
    $leftNavBorder: 1px solid $lightGray !default;
    
    $topSubNavBg: $white !default;
    $topSubNavItemColor: darken($topSubNavBg, 5%)  !default;
    $topSubNavItemHover: darken($topSubNavBg, 15%) !default;
    
    
    $baseImageURL: '~static/images/' !default;
    
    /* login */
    $loginBg: url($baseImageURL+"bg.jpg") center center no-repeat !default;
    $loginBtn:$themeColor;
    $loginTextColor: darken($white, 12%) !default;
    $loginErrTextColor: #e5b989 !default;
    $loginInputBorderColor: none !default;
    $loginInputBg: $lighterGray !default;
    $loginInputErrBg: #ffdede !default;
    $loginInputColor: $darkGray !default;
    $loginLangCurBg: darken($loginBtn, 2%) !default;
    $loginLangCurColor: $lighterGray !default;
    
    /* Element Chalk Variables */
    /* Colors
    -------------------------- */
    $--color-primary: $themeColor;
    /* Menu
    --------------------------*/
    $--menu-item-hover-fill: rgba($themeColor, .38);
    
    html, body, div, section, header, footer, aside, ul, ol, li, table, tr, th, td, button, input, textarea, select, h1, h2, h3, h4, h5, h6, em, i, strong, p, span, blockquote {
        margin: 0;
        padding: 0;
    }
    h1, h2, h3, h4, h5, h6, em, th, i, strong, input, textarea, button, select {
        font-weight: normal;
        font-style: normal;
        font-size: 100%;
    }
    ul, ol {
        list-style: none;
        vertical-align: top;
    }
    table, td, th {
        border-collapse: collapse;
        border-spacing: 0;
    }
    input, button, select, textarea {
        outline: none;
        background: none;
    }
    textarea {
        resize: none;
    }
    img, a img {
        border: none;
        vertical-align: top;
    }
    a, a:link, a:active, a:visited {
        color: $linkColor;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    a:hover {
        color: $themeColor;
    }
    html {
        height: 100%;
    }
    body {
        font-size: $fontSize;
        font-family: $fontFamily;
        color: $fontColor;
        height: 100%;
    }
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .fc {
        margin: 0 auto;
    }
    .vertical-middle {
        vertical-align: middle;
    }
    
    /**显示隐藏**/
    .hidden {
        display: none;
    }
    .clear:after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .overflow {
        overflow: hidden;
    }
    
    /**定位**/
    
    .posR {
        position: relative;
    }
    .posA {
        position: absolute;
    }
    .posF {
        position: fixed;
    }
    .fb {
        font-weight: bold;
    }
    .textL {
        text-align: left;
    }
    .textC {
        text-align: center;
    }
    .textR {
        text-align: right;
    }
    .text2em {
        text-indent: 2em;
    }
    .word-hidden {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

gf.scss

.wrapper{
        overflow:hidden
    }
    .sys-header {
        position: relative;
        width: 100%;
        height: $headerHeight;
        //background-color: $headerBgColor;
        background-color: #353636;
        z-index: 500;
        .logo {
            position: absolute;
            left:200px;
            height: $headerHeight;
            line-height: $headerHeight;
            padding-left: 20px;
            color: $white;
            font-size: 20px;
            font-weight: 700;
        }
        img {
            position: absolute;
            left:30px;
            height: $headerHeight;
        }
        ul {
            width: 100%;
            // border: 1px red solid;
        }
        li {
            font-size: 25px;
            display: inline-block;
            height: 50px;
            line-height: 47px;
            margin-right: 20px;
            color: white;
        }
        .userInfo {
            position: absolute;
            width:20%;
            right:20px;
            height: $headerHeight;
        }
    }
    
    
    .sys-page{
        width: 100%;
        height: 100%;
        margin-top:10px;
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        background:#f5f7f9;
    }
    .sys-content{
        position: absolute;
        top:  $headerHeight;
        bottom: 0;
        right: 0;
        left: $leftNavWidth;
        padding: 30px 0px 10px 0px;
        .page-content{
            background: white;
            padding:5px 15px 15px 15px;
        }
    }
    .activeName_css .el-col-11{
        height: 40px;
    }
    .leftdiv {
        padding: 0;
        margin: 0;
        width: 99%;
        height: auto;
        overflow: hidden;
        overFlow-x: scroll ;
        overflow-y: visible;
        margin-left: 3px;
    }
    
    
    .tag-nav{
        z-index: 500;
        position: absolute;
        top:0px;
        left:0px;
        width: 100%;
        height: 43px;
        padding: 0px;
        //background: $white;
        background:#f0f0f0;
        border-bottom: 1px solid #ddd;
        box-shadow: 0 1px 2px #f2f2f2;
        box-sizing: border-box;
       
        .tag-nav-item{
            display: inline-block;
            position: relative;
            left:5px;
            top:5px;
            height: 26px;
            line-height: 26px;
            padding: 0 5px;
            margin-right: 5px;
            border: 1px solid #d7d8da;
            background-color: $white;
            border-radius: 2px;
            color:#909399;
            //background-color: $--tag-fill;
            text-decoration: none;
    
            .ivu-tag-dot-inner{
                display: inline-block;
                width: 12px;
                height: 12px;
                margin-right: 8px;
                border-radius: 50%;
                background: #e8eaec;
                position: relative;
                top: 1px;
            }      
    
            span{
                width: 16px;
                height: 16px;
                line-height: 16px;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;
                transition: all .3s ease;
                transform-origin: 100% 50%;
                font-size: 12px;
                //color: $themeColor;          
    
                &:before {
                    display: inline-block;
                }
                &:hover {
                    background-color: #1890ff;
                    color: $white;
                }
            }
            &.cur{
                // background-color: #1890ff;
                color: #909399;
             
                & .ivu-tag-dot-inner{
                    background-color: #1890ff;
                
                    &:hover{
                        background-color: lighten($themeColor, 34%);
                        color: $themeColor;
                   }
                }
            }
        }
    }
    
    
    .el-menu{
        border-right: none;
        z-index: 1;
    
    }
    
    .el-submenu .el-submenu__title {
        height: 40px;
        line-height: 40px;
    }
    
    .el-menu .el-submenu>.el-submenu__title {
        float: none;
        height: 40px;
        line-height: 40px;
    } 
    
    .el-menu .el-menu-item {
        float: none;
        height: 40px;
        line-height: 40px;
        width: auto;
    } 
    
    .sys-login{
        width: 100%;
        height: 100%;
        background: $loginBg;
    
        .login-area {
            width: 330px;
            padding-top: 10%;
            margin: 0 auto;
            .logo {
                width: 100%;
                height: 200px;
                text-align: center;
                img {
                    width: 160px;
                }
            }
        }
    
        .form-group {
            width: 100%;
            height: 100%;
            position: relative;
            padding-bottom: 20px;
            color: $loginTextColor;
            overflow: hidden;
    
            input::-webkit-input-placeholder{
                color: #7e9fb0;
            }
            
            .el-input__inner {
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                background-color: $loginInputBg;
                border: 1px solid $loginInputBorderColor;
                border-radius: 4px;
                color: $loginInputColor;
                font-size: 15px;
                overflow: hidden;
    
                &:hover{
                    border-color: rgba(255,255,255,.2);
                }
                &:focus{
                    border-color: rgba(255,255,255,.4);
                }
            }
            .el-form-item{
                &.is-error .el-input__inner{
                    border-color: $red;
                    background-color: $loginInputErrBg;
                }
                &.captcha {
                    .el-input{
                        width: auto;
                    }
                    input{
                        width: 200px;
                    }
                    img{
                        float: right;
                        width: 100px;
                        height: 40px;
                    }
                }
            }
            .el-form-item__error{
                color: $loginErrTextColor;
            }
        }
    
        .btn-login {
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin: 10px 0;
            padding: 0;
            background: $loginBtn;
            border: none;
            border-radius: 4px;
            color: $loginTextColor;
            font-size: 18px;
            text-align: center;
            cursor: pointer;
    
            &:hover{
                background: darken($loginBtn, 2%)
            }
        }
        
        .err-msg{
            color: $red;
        }
        .tip{
            margin-top: 10px;
            color: $loginTextColor;
        }
    
        .lang-toggle{
            text-align: center;
            color: $loginTextColor;
    
            span{
                display: inline-block;
                width: 26px;
                height: 26px;
                line-height: 26px;
                border-radius: 50%;
                color: $loginTextColor;
                font-size: 14px;
                text-align: center;
                cursor: pointer;
    
                &.cur{
                    background: $loginLangCurBg;
                    color: $loginLangCurColor;
                }
            }
        }
    
    }

gf-default.scss是一个总的导入文件

@import 'common';
    
    $--font-path: '~element-ui/lib/theme-chalk/fonts';
    
    @import "~element-ui/packages/theme-chalk/src/index";
    
    @import 'gf';

$–font-path: '~element-ui/lib/theme-chalk/fonts’是定义ElementUI字体所在目录  
@import “~element-ui/packages/theme-chalk/src/index”;是引入ElementUI定义的css

这些文件位于下载ElementUI组件目录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 14]  
在src/main.js中导入scss和ElementUI组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 16]  
复制图片文件到src/assets目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 17]  
这两个目录从云盘上下载  
链接：https://pan.baidu.com/s/1zQML5Y\_YL9qWg9C6-yLCwQ  
提取码：j3ci

## 配置路由 ##

VUE前端项目页面之间跳转使用vue-router技术，需要在前端配置路由记录，在webpack创建的空项目中，定义了一条路由规则是当访问http://localhost:8080/\#/时，自动加载HelloWorld组件到默认的节点上，节点是在App.vue组件中定义的，当VUE实例初始化时，自动加载了App组件。

App.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 18]  
路由表定义  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 19]  
自定义一个组件，修改默认规则，当访问http://localhost:8080/\#/时，加载我们自定义的组件，并且在组件中使用ElementUI框架

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: () => import('../gf/home')
        }
      ]
    })

当访问http://localhost:8080/时，加载组件home，home组件在目录src/gf/home下，在src/gf/home目录下新建index.vue空文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 20]  
启动VUE前端项目，并访问http://localhost:8080  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 21]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 22]  
编辑/src/gf/home/index.vue文件，添加ElementUI控件，打开ElementUI站点，https://element.eleme.cn/\#/zh-CN/component/table，复制样例代码测试效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 23]  
集成ElementUI版本下载  
链接：https://pan.baidu.com/s/1IQSrUsXwpoLIfuyK28tpsg  
提取码：755y

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200220163937506.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200220164032589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200220164146158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200220164203226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200220165721456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200220165841624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200220165936371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200220170434970.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200220170530919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200220175539994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200220175818996.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200220175942173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200220180413981.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200220180626230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200221093950312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200221101349950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200221094243521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200221100028416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200221095014289.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200221095118489.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200221095638231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20200221100257680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20200221100311179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20200221101434127.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg==,size_16,color_FFFFFF,t_70