Vue（ElementUI）+Maven Spring Cloud 管理系统项目部署

部署项目结构（webpack+脚手架(vue-cli)开发）

1.（前提）node.exe

2.全局安装 

npm install vue-cli -g 

3.来到项目文件的位置下初始化项目

vue init webpack "项目名称"

其他需要的模块引入

==>项目路径下 引入ElementUI

npm i element-ui -S

==>引入axios（跨域，发请求）

npm install axios

==>引入scss（重新设计默认样式）

npm install node-sass --save-dev //安装node-sass 
npm install sass-loader --save-dev //安装sass-loader

配置webpack.base.conf.js

rules:[
{ 
    test: /\.scss?$/,
    loaders: ["style", "css", "sass"]
}
]

===>main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'//引入ElementUI组件
import 'element-ui/lib/theme-chalk/index.css'//基本样式，后面要修改的的样式也是这
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import axios from 'axios'//支持
import $ from "jquery"//引入JQ

Vue.use(ElementUI);
Vue.config.productionTip = false

Vue.prototype.$http=axios
//设置全局变量，获取项目地址：端口,用于非axios请求的接口
Vue.prototype.wsurl = 'http://localhost:8081';
Vue.prototype.$ajax = axios;

//基础请求路径
axios.defaults.baseURL = 'http://localhost:8081';
// 每次请求携带cookies信息
axios.defaults.withCredentials = true;
//超时时间
axios.defaults.timeout = 5000;

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  iView.LoadingBar.start()
  return config;
}, function (error) {
  // 对请求错误做些什么
  iView.LoadingBar.error()
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  iView.LoadingBar.finish()
  return response;
}, function (error) {
  // 对响应错误做点什么
  iView.LoadingBar.error()
  return Promise.reject(error);
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data:function(){//设置全局变量在后面有用
    return{
      DATATEMP:'',
    }
  },
  components: { App },
  template: '<App/>'
})

页面布局：主题内容布局如下，分为左边表格与右边表格部分

==>App.vue

==>左边部分表格

<div class="leftArea">
                <div class="tasking commonBar">
                  <div class="taskbar">
                    <span class="boldText">任务进行中</span>
                  </div>
                  <!--任务进行表格，这里引入自己写好的组件-->
                  <table-component ref="table" :centerDialogVisible="centerDialogVisible" @showinfo="showDig" class="component color1" :tableDatas="tableData" ></table-component>
                  <table-component ref="table" :centerDialogVisible="centerDialogVisible" @showinfo="showDig" class="component color1" :tableDatas="tableData" ></table-component>
                </div>
                <div class="untask commonBar">
                  <div class="taskbar">
                    <span class="boldText">未开始任务</span>
                    <div class="page">
                      <span class="prevpage" ></span><span>1</span>/3<span class="nextpage" ></span>
                    </div>
                  </div>
                  <!--未开始任务表格，这里引入自己写好的组件-->
                  <unbegintasktable :centerDialogVisible="centerDialogVisible" @showinfo="showDig" class="component color2" :tableDatas="tableData" ></unbegintasktable>
                  <unbegintasktable :centerDialogVisible="centerDialogVisible" @showinfo="showDig" class="component color2" :tableDatas="tableData" ></unbegintasktable>
                </div>
              </div>

这里的表格是表头纵向的，ElementUI没找到这种表格，改ElementUI的原有表格样式也比较麻烦，所以自己写了

下面那个表格和这个基本是一样的，就只写一个作为样例

==>table-component

 <table class="mailTable"
         ref="multipleTable"
         :data="tableData">
    <tr>
      <td class="column2">任务ID</td>
      <td class="colval" style="background-color:#d4e0fa;">{{tableData.taskIds}}</td>
      <td class="column2">执行单元</td>
      <td class="colval2" style="background-color:#d4e0fa;">{{tableData.exeUnit}}</td>
    </tr>
    <tr>
      <td class="column2">任务执行时间</td>
      <td class="colval">{{tableData.taskExeTime}}</td>
      <td class="column2">创建时间</td>
      <td class="colval2" >{{tableData.createTime}}</td>
    </tr>
    <tr>
      <td class="column2">配套资源</td>
      <td class="colval" style="background-color:#d4e0fa;">{{tableData.resource}}</td>
      <td class="column2">执行人</td>
      <td class="colval2" style="background-color:#d4e0fa;">{{tableData.exePerson}}</td>
    </tr>
    <tr>
      <td class="column2">状态</td>
      <td class="colval">{{tableData.state}}</td>
      <td class="column2">操作</td>
      <td class="colval2" >
        <el-button  type="primary" @click="showtask"><div class="icon1"></div>查看任务</el-button>
        <taskbegin></taskbegin><!--开始任务组件-->
        <taskend></taskend><!--任务结束组件-->
      </td>
    </tr>
  </table>

script部分==>

  import taskbegin from './button/taskbegin'
  import taskend from './button/taskend'
    export default {
        name: 'tableConponent',//组件名
        components:{//注册引入的组件
          taskbegin,
          taskend
        },
        data:function(){
        return{
          tableData:[]//子组件要用这个表格的数据
        }
      },
      watch:{//监听数据的变动
          tableDatas:function (newDatas,oldData) {
            this.tableData=newDatas;
          }
      },
      methods:{
        showtask:function () {//子组件触发父组件上的事件
          this.$emit('showinfo',true);
        }
      },
      props: ['tableDatas'],//在此声明使用父组件的数据
      created() {
        this.tableData=this.tableDatas;
      }

    }

==>右边部分的表格是用的ElementUI的自带表格，主要讲一下如何重新设计element的默认表格样式

由于element自带的表格样式可能不满足项目开发的需求，所以就涉及到修改样式。

我这里有两种方法：

1.直接在对应容器里修改，在浏览器页面审查元素

把对应的样式写在Vue的样式表里，相当于对样式的一个复写。会自动覆盖默认样式

==>样式表

  /*重新设计日历样式*/

  .el-date-editor .el-range-separator {
    padding: 0 5px;
    line-height: 32px;
    width: 15%;
    color: #303133;
  }

  .el-icon-date:before {
    content: "";
  }
  .el-date-editor .el-range__close-icon {
    background: url(../static/images/时间.png) center no-repeat;
  }
  .el-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    line-height: 40px;
  }

当然这样做很危险，其他同类型表格的样式也会被修改。所以下面这种我推荐使用

2.使用scss进行重新设计，在需要更改组件样式的顶层容器的样式前，加上 /deep/

<style scoped lang="scss">
  /deep/#tables{
      .el-button{
        width: 78px;
        height: 32px;
        padding: 7px 15px;
          }   
     }
</style>