springboot-vue项目前台2

api_account.js

import * as API from './'

export default {
  //登录
  login: params => {
    return API.POST('login/', params)
  },
  //登出
  logout: params => {
    return API.GET('/api/v1/users/logout', params)
  },
  //修改个人信息
  changeProfile: params => {
    return API.PATCH('/api/v1/users/profile', params)
  },

  //查询获取user列表(通过page分页)
  findList: params => {
    return API.GET('account/all', params)
  },

  add: params => {
    return API.POST('account/add', params)
  },
  findPermissionList:params => {
    return API.POST('account/permissions', params)
  },
}

api_device.js

import * as API from './'

export default {

  //查询获取列表(通过page分页)
  findList: params => {
    return API.POST('deviceType/all', params)
  },
  
  //添加
  add: params => {
    return API.POST(`deviceType/add`, params)
  },
  
/*  //查询获取一条信息
  findById: id => {
    return API.GET(`/api/v1/books/${id}`)
  },


  //更新
  update: (id, params) => {
    return API.PUT(`/api/v1/books/${id}`, params)
  },

  //单个删除
  remove: id => {
    return API.DELETE(`/api/v1/books/${id}`)
  },

  //批量删除，传ids数组
  removeBatch: (ids) => {
    return API.DELETE(`/api/v1/books/batch/${ids}`)
  },*/

  //添加车型
  addCM: params => {
    return API.POST(`carmodel/add`, params)
  },

  delCM:id => {
    return API.GET(`carmodel/delete/${id}`)
  },
  delDT:id => {
    return API.GET(`deviceType/delete/${id}`)
  },
}

api_file.js

import * as API from './'
import Vue from 'vue'

export default {

/*  //查询获取列表(通过page分页)
  findList: params => {
    return API.GET('/api/v1/books', params)
  },
  
  //查询获取一条信息
  findById: id => {
    return API.GET(`/api/v1/books/${id}`)
  },

  add: params => {
    return API.POST(`/api/v1/books`, params)
  },
  update: (id, params) => {
    return API.PUT(`/api/v1/books/${id}`, params)
  },

  //单个删除
  remove: id => {
    return API.DELETE(`/api/v1/books/${id}`)
  },

  //批量删除，传ids数组
  removeBatch: (ids) => {
    return API.DELETE(`/api/v1/books/batch/${ids}`)
  },*/

  //新增方法
  findTboxList: params => {
    return API.POST('package/all', params)
  },
  addtboxForm: (params,config) => {
    return API.POSTFORM(`package/add`, params,config)
  },
  modify:(params) => {
    return API.POST(`package/modify`, params)
  }
}

index.js

import axios from 'axios'
import {bus} from '../bus.js'
// Object.defineProperty(Vue.prototype, '$axios', { value: axios });

axios.defaults.withCredentials = true;
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//配置请求头

//添加一个请求拦截器
axios.interceptors.request.use(function (config) {
  console.dir(config);
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
  // alert("响应拦截器")
  if (response.data && response.data.errcode) {
    if (parseInt(response.data.errcode) === 40001) {
      //未登录
      bus.$emit('goto', '/login')
    }
  }
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

//基地址
let base = 'http://127.0.0.1:8086/';  //接口代理地址参见：config/index.js中的proxyTable配置

//通用方法
export const POST = (url, params) => {
  return axios.post(`${base}${url}`, params).then(res => res.data).catch(function (error) {
    alert("请求出现异常");
    console.log(error);
    // window.location.reload();
  });
}

export const GET = (url, params) => {
  return axios.get(`${base}${url}`, {params: params}).then(res => res.data).catch(function (error) {
    alert("请求出现异常");
    console.log(error);
    // window.location.reload();
  });
}

export const PUT = (url, params) => {
  return axios.put(`${base}${url}`, params).then(res => res.data)
}

export const DELETE = (url, params) => {
  return axios.delete(`${base}${url}`, {params: params}).then(res => res.data)
}

export const PATCH = (url, params) => {
  return axios.patch(`${base}${url}`, params).then(res => res.data)
}

export const POSTFORM = (url, params,config) => {
  return axios.post(`${base}${url}`, params,config).then(res => res.data).catch(function (error) {
    alert("请求出现异常");
    console.log(error);
    // window.location.reload();
  });
}

util.js

/**
 * Created by jerry on 2017/4/14.
 */
var SIGN_REGEXP = /([yMdhsm])(\1*)/g
var DEFAULT_PATTERN = 'yyyy-MM-dd'
function padding (s, len) {
  let l = len - (s + '').length
  for (var i = 0; i < l; i++) { s = '0' + s }
  return s
};

export default {
  getQueryStringByName: function (name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg)
    var context = ''
    if (r != null) { context = r[2] }
    reg = null
    r = null
    return context === null || context === '' || context === 'undefined' ? '' : context
  },
  formatDate: {

    format: function (date, pattern) {
      pattern = pattern || DEFAULT_PATTERN
      return pattern.replace(SIGN_REGEXP, function ($0) {
        switch ($0.charAt(0)) {
          case 'y': return padding(date.getFullYear(), $0.length)
          case 'M': return padding(date.getMonth() + 1, $0.length)
          case 'd': return padding(date.getDate(), $0.length)
          case 'w': return date.getDay() + 1
          case 'h': return padding(date.getHours(), $0.length)
          case 'm': return padding(date.getMinutes(), $0.length)
          case 's': return padding(date.getSeconds(), $0.length)
        }
      })
    },
    parse: function (dateString, pattern) {
      var matchs1 = pattern.match(SIGN_REGEXP)
      var matchs2 = dateString.match(/(\d)+/g)
      if (matchs1.length === matchs2.length) {
        var _date = new Date(1970, 0, 1)
        for (var i = 0; i < matchs1.length; i++) {
          var _int = parseInt(matchs2[i])
          var sign = matchs1[i]
          switch (sign.charAt(0)) {
            case 'y': _date.setFullYear(_int); break
            case 'M': _date.setMonth(_int - 1); break
            case 'd': _date.setDate(_int); break
            case 'h': _date.setHours(_int); break
            case 'm': _date.setMinutes(_int); break
            case 's': _date.setSeconds(_int); break
          }
        }
        return _date
      }
      return null
    }

  }

}

list.vue

device.vue

avnlist.vue

ipclist.vue

packagelist.vue

changepwd.vue

list.vue

profile.vue

Home.vue

Index.vue

Login.vue

<template>
  <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
           class="demo-ruleForm login-container">
    <h3 class="title">管理员登录h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号">el-input>
    el-form-item>
    <el-form-item prop="pwd">
      <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码">el-input>
    el-form-item>
    
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="loading">登录el-button>
    el-form-item>
  el-form>
template>

<script>
  import API from '../api/api_account';

  export default {
    data() {
      return {
        loading: false,
        account: {
          username: 'admin',
          pwd: '123456'
        },
        rules: {
          username: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            //{ validator: validaePass }
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    methods: {
      handleLogin() {
        let that = this;
        this.$refs.AccountFrom.validate((valid) => {
          if (valid) {
            this.loading = true;
            let loginParams = {username: this.account.username, pwd: this.account.pwd};
            API.login(loginParams).then(function (result) {
              that.loading = false;
              if (result && result.id) {
                localStorage.setItem('access-user', JSON.stringify(result));
//                that.$store.commit('SET_ROUTERS', user.permissions)
//                that.$router.addRoutes(that.$store.getters.addRouters);
//                that.$router.options.routes = that.$store.getters.routers;
                  that.$router.push({path: '/'});
              } else {
                that.$message.error({showClose: true, message: result.errmsg || '登录失败', duration: 2000});
              }
            }, function (err) {
              that.loading = false;
              that.$message.error({showClose: true, message: err.toString(), duration: 2000});
            }).catch(function (error) {
              that.loading = false;
              console.log(error);
              that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
            });
          }
        });
      }
    }
  }
script>
<style>
  body {
    background: #DFE9FB;
  }
style>
<style lang="scss" scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 160px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    background: -ms-linear-gradient(top, #ace, #00C1DE); /* IE 10 */
    background: -moz-linear-gradient(top, #ace, #00C1DE); /*火狐*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ace), to(#00C1DE)); /*谷歌*/
    background: -webkit-linear-gradient(top, #ace, #00C1DE); /*Safari5.1 Chrome 10+*/
    background: -o-linear-gradient(top,#ace, #00C1DE); /*Opera 11.10+*/

    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import index from '@/components/Index'

import packageList from '@/components/filelist/packageList'
import avnList from '@/components/filelist/avnlist'
import ipcList from '@/components/filelist/ipclist'

import bookCategoryList from '@/components/bookcategory/list'
import UserList from '@/components/user/list'
import UserChangePwd from '@/components/user/changepwd'
import UserProbook from '@/components/user/profile'

import Device from '@/components/device/device'

import store from '@/store/'

// 懒加载方式，当路由被访问的时候才加载对应组件
//箭头函数是省略了function函数名和return,resolve是形参，require是函数体并且是return。
const Login = resolve => require(['@/components/Login'], resolve)

Vue.use(Router)

let router = new Router({
// mode: 'history',
  routes: [ //根据这个遍历得到左边菜单
    {
      path: '/login',
      name: '登录',
      component: Login
    },
    /*{
      path: '/',
      name: 'home',
      component: Home,
      redirect: '/index',  //加载右边
      leaf: true, // 只有一个节点
      menuShow: true,
      iconCls: 'iconfont icon-home', // 图标样式class
      children: [
        {
          path: '/index',
          component: index,
          name: '鑫源简介',
          menuShow: true
        }

      ]
    },*/
    /*{
      path: '/',
      component: Home,
      name: '升级包管理',
      menuShow: true,
      iconCls: 'iconfont icon-books',
      children: [
        {
          path: '/filelist/tboxlist',
          component: tboxList,
          name: 'tbox升级包列表',
          menuShow: true  //true则Home.vue会加载这个条目，否则不加载
        },
        {
          path: '/filelist/avnlist',
          component: avnList,
          name: 'AVN升级包列表',
          menuShow: true
        },
        {
          path: '/filelist/ipclist',
          component: ipcList,
          name: 'IPC升级包列表',
          menuShow: true
        }
      ]
    },*/
    {
      path: '/',
      component: Home,
      name: '升级包管理',
      menuShow: true,
      leaf: true, // 只有一个节点
      redirect: '/filelist/packagelist',  //加载右边
      iconCls: 'iconfont icon-users', // 图标样式class
      children: [
        {
          path: '/filelist/packagelist',
          component: packageList,
          name: '升级包管理',
          menuShow: true
        }
      ]
    },
    {
      path: '/',
      component: Home,
      name: '设备类型管理',
      menuShow: true,
      leaf: true, // 只有一个节点
      iconCls: 'iconfont icon-users', // 图标样式class
      children: [
        {
          path: '/device/list',
          component: Device,
          name: '设备类型列表',
          menuShow: true
        }
      ]
    },
    {
      path: '/',
      component: Home,
      name: '用户管理',
      menuShow: true,
      leaf: true, // 只有一个节点
      iconCls: 'iconfont icon-users', // 图标样式class
      children: [
        {
          path: '/user/list',
          component: UserList,
          name: '用户列表',
          menuShow: true
        }
      ]
    },
    {
      path: '/',
      component: Home,
      name: '设置',
      menuShow: true,
      iconCls: 'iconfont icon-setting1',
      children: [
        {
          path: '/user/probook', 
          component: UserProbook, 
          name: '个人信息', 
          menuShow: true
        },
        {
          path: '/user/changepwd', 
          component: UserChangePwd, 
          name: '修改密码', 
          menuShow: true
        }
      ]
    },
  ]
})

router.beforeEach((to, from, next) => {//每次路由都会走
  /*console.log('to:' + to.path)
  console.log('from:' + from.path)
  console.log('next:' + next.path)*/
  /*if(to.path.startsWith('/filelist/packagelist')){
    store：Store {_committing: false, _actions: {…}, _actionSubscribers: 
    Array(0), _mutations: {…}, _wrappedGetters: {…}, …}
    if(store.getters.getDevicetypes.length = 0)
      console.log("store.getters.getDevicetypes;",store.getters.getDevicetypes);
  }*/
  if (to.path.startsWith('/login')) {
    window.localStorage.removeItem('access-user')
    next()
  } else {
    let user = JSON.parse(window.localStorage.getItem('access-user'))
    if (!user) {
      next({path: '/login'})
    } else {
      next()
    }

  }
})

export default router

actions.js

// 页面调用action，action调用mutation来设置数据state
import * as types from './mutations_types';

export default {
    dispatch_devicetypes:({
        commit
    }, obj) => {
        commit(types.ALL_DEVICETYPES, obj);
    },
    dispatch_packages:({
        commit
    }, obj) => {
        commit(types.ALL_PACKAGES, obj);
    },
    dispatch_accounts:({
        commit
    }, obj) => {
        commit(types.ALL_ACCOUNTS, obj);
    },
    dispatch_permission:({
        commit
    }, obj) => {
        commit(types.ALL_PERMISSION, obj);
    },

    /*update_cur_shop_status: ({
        commit
    }, obj) => {
        commit(types.UPDATE_CUR_SHOP_STATUS, obj);
    },
    create_db: ({
        commit
    }, {
        shop
    }) => {
        commit(types.CREATE_DB, shop);
        commit(types.UPDATE_LOCAL);
    },
    add_db: ({
        commit
    }) => {
        commit(types.ADD_DB);
        commit(types.UPDATE_LOCAL);
    },*/
};

getters.js

/*getter是state的get方法，没有get页面就获取不到数据

获取页面:
import {mapGetters,mapActions} from 'vuex'
 
{{count}}
computed:mapGetters([
 'count'
 ]),

store.js:

var state = {
 count:6
},
var getters={
 count(state){
  return state.count
 }
}

改变数据页面：
增加
methods:mapActions([
 //该 increment 来自 store.js 中导出的 actions 和 mutations 中的 increment 
 'increment',
 ])

先发给action:
const actions ={
 // ({commit,state}) 这种写法是 es6 中的对象解构
 increment({commit,state}){
  //提交一个名为 increment 的变化，名字可自定义，可以认为是类型名，与下方 mutations 中的 increment 对应
  //commit 提交变化，修改数据的唯一方式就是显式的提交 mutations
  commit('increment') 
 }
}
再发给mutations:
const mutations ={
 //与上方 commit 中的 ‘increment' 相对应
 increment(state){
  state.count ++;
 }
}
*/
//页面调用数据的getter方法来获取数据states
export default {
    getInfos(state) {
        state.cartInfos.total_price = 0;
        state.cartInfos.total_nums = 0;
        var list = state.cartList;
        for (var i = 0; i < list.length; i++) {
            var price = parseInt(list[i].price),
                num = parseInt(list[i].num);

            state.cartInfos.total_price += price * num;
            state.cartInfos.total_nums += num;
        }
        return state.cartInfos;
    },
    getCartList(state) {
        return state.cartList;
    },
    getDevicetypes(state) {
        return state.devicetypes;
    },
    getNewDeviceType(state) {
        return state.newDeviceType;
    },
    getPackages(state) {
        return state.packages;
    },
    getAccounts:state=> state.accounts,

    getPermissions:state => state.permissions,

    getNewpermissions:state => state.newpermissions,

    /*getAccounts:state =>state.accounts,

    getPermissions:state => state.permissions,*/
};

index.js

import Vue from 'vue'
import state from './state';
import mutations from './mutations';
import getters from './getters';
import actions from './actions';
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

mutations.js

import * as types from './mutations_types'

export default {
    [types.ALL_DEVICETYPES](state, obj) {
        state.devicetypes = obj;
        let newDeviceType = [];
        for(let i in obj) {
          let ob = {};
          ob.label = obj[i].dtname;
          ob.value = obj[i].dtname;
          ob.children = [];
          for(let j in obj[i].carModels){
            let oc = {};
            oc.label = obj[i].carModels[j].cname;
            oc.value = obj[i].carModels[j].cname;
            ob.children.push(oc);
          }
          newDeviceType.push(ob);
        }
        state.newDeviceType = newDeviceType;
    },

    [types.ALL_PACKAGES](state, obj) {
        state.packages = obj;
    },
    [types.ALL_ACCOUNTS](state, obj) {
        console.log("ALL_ACCOUNTS : ",obj);
        state.accounts = obj;
    },
    [types.ALL_PERMISSION](state, obj) {
        state.permissions = obj;
        console.log("state.permissions:",state.permissions);
        let newpermissions = [];
        for(let i in obj) {
          let ob = {};
          ob.key = obj[i].pid;
          ob.label = obj[i].pdescription;
          newpermissions.push(ob);
        }
        state.newpermissions = newpermissions;
        console.log("state.newpermissions:",state.newpermissions);
    },

    /*[types.CLEAR_LOCAL](state) {
        state.cartList.forEach(function(item) {
            item.num = 0;
        });
        state.cartList = [];
        localStorage.removeItem('vuex_cart');
    },
    [types.UPDATE_LOCAL](state) {
        localStorage.setItem('vuex_cart', JSON.stringify(state.cartList));
    },
    [types.UPDATE_CUR_SHOP_STATUS](state, {
        index = -1
    }) {
        state.curIndex = index;
    },
    [types.DELETE_DB](state) {
        if (state.curIndex >= 0) {
            state.cartList[state.curIndex].num = 0;
            state.cartList.splice(state.curIndex, 1);
        }
    },
    [types.CREATE_DB](state, shop) {
        // console.log('mu create');

        state.cartList.push(shop);
    },
    [types.ADD_DB](state) {
        // console.log('mu add id:' + state.curIndex);

        state.cartList[state.curIndex].num = parseInt(state.cartList[state.curIndex].num);
        state.cartList[state.curIndex].num++;
    },
    [types.REDUCE_DB](state) {
        // console.log('mu reduce');

        state.cartList[state.curIndex].num = parseInt(state.cartList[state.curIndex].num);
        state.cartList[state.curIndex].num--;

        // console.log(state.cartList[state.curIndex].num);
        if (state.cartList[state.curIndex].num == 0) {
            state.cartList.splice(state.curIndex, 1);
        }
    },
    [types.CHECK_DB](state, {
        id
    }) {
        // console.log('mu check id :' + id);
        // console.log(state.cartList);

        state.curIndex = -1;

        var list = state.cartList;
        if (list.length) {
            for (var i = 0; i < list.length; i++) {
                if (list[i].id == id) {
                    state.curIndex = i;
                    break;
                }
            }
        }
    }*/
};

mutations_types.js

/*//添加菜品到购物车
export const CREATE_DB = 'CREATE_DB';

//给购物车的菜品++
export const ADD_DB = 'ADD_DB';

//给购物车的菜品--
export const REDUCE_DB = 'REDUCE_DB';

//删除购物车的索引
export const DELETE_DB = 'DELETE_DB';

//更新当前菜品在购物车的状态
export const UPDATE_CUR_SHOP_STATUS = 'UPDATE_CUR_SHOP_STATUS';

//检测购物车内是否存在某菜品
export const CHECK_DB = 'CHECK_DB';

//更新本地数据
export const UPDATE_LOCAL = 'UPDATE_LOCAL';

//清空本地数据
export const CLEAR_LOCAL = 'CLEAR_LOCAL';*/

export const ALL_DEVICETYPES = 'ALL_DEVICETYPES';
export const ALL_PACKAGES = 'ALL_PACKAGES';
export const ALL_ACCOUNTS = 'ALL_ACCOUNTS';
export const ALL_PERMISSION = 'ALL_PERMISSION';

state.js

export default {

    devicetypes:[], //设备类型
    newDeviceType:[],
    packages: [],//升级包
    accounts: [],//账号
    permissions:[],//权限
    newpermissions:[],

    /*//购物车列表
    cartList: localStorage.getItem('vuex_cart') ? JSON.parse(localStorage.getItem('vuex_cart')) : [],

    //当前购物车信息
    cartInfos: {
        total_price: 0,
        total_nums: 0
    },

    //当前菜品是否在购物车的状态。在则是对应的索引，不在则是-1
    curIndex: -1*/
};

App.vue

bus.js

/**
 * Created by jerry on 2017/4/14.
 */
import Vue from 'vue'

export let bus = new Vue()

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'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont.css'
import '@/assets/styles/main.scss'
import curvejs from 'curvejs'  //画线的

Object.defineProperty(Vue.prototype, '$curvejs', { value: curvejs });
Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: {App}
})

index.html

package.json

{
  "name": "litadmin",
  "version": "1.2.1",
  "description": "A Vue.js project for admin",
  "author": "[email protected]",
  "private": true,
  "scripts": {
    "server": "node server/bin/www",
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "echarts": "^3.7.1",
    "element-ui": "^2.0.7",
    "js-md5": "^0.7.3",
    "lodash": "^4.17.4",
    "vue": "^2.5.9",
    "vue-router": "^2.8.1",
    "vue-template-compiler": "^2.5.9",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.4",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.15.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.3",
    "node-sass": "^4.5.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.2",
    "ora": "^1.3.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "semver": "^5.4.1",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.9",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "webpack": "^2.7.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^2.6.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

 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'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont.css'
import '@/assets/styles/main.scss'
import curvejs from 'curvejs'  //画线的
import store from '@/store/'

Object.defineProperty(Vue.prototype, '$curvejs', { value: curvejs });
Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, //会自动注册给子组件，在子组件中通过 this.$store 访问
  template: '',
  components: {App}
})