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

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

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

安装文档描述创建VUE项目

如果第一次创建，下载chromedriver.exe需要较长时间

按照提示，将命令行转移到gfvue,执行npm run dev即可启动前台项目

前台项目默认端口是：8080

上述是使用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即可


在根目录下有配置文件package.json，相当于Maven项目的POM.xml文件，我们可以配置前端项目运行时依赖的组件和开发时依赖的组件，前端项目有很多通用功能的组件，可以直接引入使用，就像Maven项目的Jar包一样。

引入这些运行时和开发时依赖组件

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": "[email protected] <[email protected]>",
  "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下载这依赖组件

可以执行
npm install -g node-sass

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

eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。如果使用eslint，开发过程中语法校验非常苛刻，最好关闭它，关闭eslint校验需要修改webpack.base.conf.js文件，注释掉这行配置

定义目录结构的别名，在代码中可以使用别名定位文件或资源

VUE项目入库方法


也可以通过这种方式启动VUE实例

配置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组件目录

在src/main.js中导入scss和ElementUI组件


复制图片文件到src/assets目录下

这两个目录从云盘上下载
链接：https://pan.baidu.com/s/1zQML5Y_YL9qWg9C6-yLCwQ
提取码：j3ci

配置路由

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

App.vue

路由表定义

自定义一个组件，修改默认规则，当访问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空文件

启动VUE前端项目，并访问http://localhost:8080


编辑/src/gf/home/index.vue文件，添加ElementUI控件，打开ElementUI站点，https://element.eleme.cn/#/zh-CN/component/table，复制样例代码测试效果

集成ElementUI版本下载
链接：https://pan.baidu.com/s/1IQSrUsXwpoLIfuyK28tpsg
提取码：755y