webstormvue项目导入和tab页效果

webstorm导入vue项目

关于新建vue项目，我之前的博客有说到，这里就简单说一下webstorm如何导入：
vue项目吧。
1.找到文件下的导入设置：

2：找到你的vue项目存放路径：

这样，vue项目路径下的所有项目就都导入了进来。

2.添加npm进行运行：
点击Add新增一个npm

点击运行


启动成功！

tab页效果：

前面的准备在我的spa栏目下有，这里就直接开始整tab页效果：

1. 首先准备几个变量存储有关tab页的信息：
   state.js

export default {
	 resturantName:'笑傲江湖',
	jwt:'',
	rsp:'',
	date:[],
	cust_no:'',
	cust_name:'',
  options: [],//存放tab页的容器
  activeIndex: '',//激活的tab页路由路径
  showName:'show',//tab页的标题
  role:"",//用来区分是否是因为左侧菜单被点击造成的路由路径发生改变，是：pass；不是：nopass
  // verificationJwt:null, //这是用来保存用户等登录验证码jwt身份识别的
}

mutations.js

export default { //payload 载荷 保存参数的容器
	setResturantName:(state,payload)=>{
		state.resturantName = payload.resturantName;
	},
	setReq:(state,payload)=>{
		state.req = payload.req;
	},
	setJwt:(state,payload)=>{
		state.jwt = payload.jwt;
	},
	setDate:(state,payload)=>{
		state.date = payload.date;
	},
	setCust_no:(state,payload)=>{
		state.cust_no = payload.cust_no;
	},
	setCust_name:(state,payload)=>{
		state.cust_name = payload.cust_name;
	},
  // 添加tabs（data包含了路由路径跟tab页名字）
  add_tabs(state, data) {
    this.state.options.push(data);
  },
  // 删除tabs	（route是路由路径）
  delete_tabs(state, route) {
    let index = 0;
    for (let option of state.options) {
      if (option.route === route) {
        break;
      }
      index++;
    }
    this.state.options.splice(index, 1); //删除options里面下标为Index的一个数
  },
  // 设置当前激活的tab
  set_active_index(state, index) {
    this.state.activeIndex = index;
  },
  //设置tab页显示标题
  set_showName(state, name) {
    this.state.showName = name;
  },
  set_role(state, role) {
    this.state.role = role;
  },
  setVerificationJwt: (state, payload) => {
    state.verificationJwt = payload.verificationJwt;
  }
}

getters.js

export default {
	getResturantName:(state)=>{
		return state.resturantName;
	},
	getReq:(state)=>{
		return state.req;
	},
	getJwt:(state)=>{
		return state.jwt;
	},
	getDate:(state)=>{
		return state.date;
	},
	getCust_no:(state)=>{
		return state.cust_no;
	},
	getCust_name:(state)=>{
		return state.cust_name;
	},
  getShowName:(state) => {
    return state.showName;
  },
  getOptions:(state) => {
    return state.options;
  },
  getRole:(state) =>{
    return state.role;
  },
  getVerificationJwt:(state) =>{
    return state.verificationJwt;
  }
}

2. AppMain 主要是为了展示tab页和检测路由的变化

<template>
  <el-container class="main-container">
    <el-aside v-bind:class="asideClass">
      <LeftNav></LeftNav>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <TopNav></TopNav>
      </el-header>
      <div class="template-tabs">
        <el-tabs v-model="activeIndex" type="border-card" closable @tab-click="tabClick()" @tab-remove="tabRemove">
          <el-tab-pane :key="item.name" v-for="(item, index) in options" :label="item.name" :name="item.route">
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-main class="main-center">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  // 导入组件
  import TopNav from '@/components/TopNav.vue'
  import LeftNav from '@/components/LeftNav.vue'

  // 导出模块
  export default {
    data(){
      return {
        asideClass:'main-aside',
        index:[]
      }
    },
    components: {
      TopNav,LeftNav
    },
    created(){//钩子函数 对值重新进行渲染
      //获取Bus里存的值
      this.$root.Bus.$on('collapsed-side-click',(v)=>{
        this.asideClass=v? 'main-aside-collapsed' : 'main-aside'
      })
    },
    methods: {
      // tab切换时，动态的切换路由
      tabClick() {
        // v-model="activeIndex"是路由路径
        let path = this.activeIndex;
        this.$router.push({ path: path });
        this.$store.commit('set_role',"nopass");
      },
      tabRemove(targetName) {
        console.log(targetName);//targetName是路由路径
        this.$store.commit('set_role',"nopass");
        // let tabs = this.editableTabs;
        this.$store.commit('delete_tabs', targetName);
        // 如果激活tab页被关闭，那么需要激活别的tab页，最后一个tab页被关闭，那么跳转主界面
        if (this.activeIndex === targetName) {
          // 设置当前激活的路由
          if (this.options && this.options.length >= 1) {
            this.$store.commit('set_active_index', this.options[this.options.length - 1].route);
            this.$router.push({ path: this.activeIndex });
          }
          else {
            this.$router.push({ path: '/AppMain' });
          }
        }
      }
    },
    watch: {
      '$route'(to) {
        // 只要路由发生改变，就会触发此事件（点击左侧菜单时会触发，删除右侧tab页会触发，切换右侧已存在的tab页会触发）
        let role=this.$store.state.role;
        let showName=this.$store.getters.getShowName
        let flag = false;//判断是否页面中是否已经存在该路由下的tab页
        //options记录当前页面中已存在的tab页
        for (let option of this.options) {
          //用名称匹配，如果存在即将对应的tab页设置为active显示桌面前端
          if (option.name === showName) {
            flag = true;
            this.$store.commit('set_active_index',  to.path);
            break;
          }
        }
        //如果不存在，则新增tab页，再将新增的tab页设置为active显示在桌面前端
        // if(role!='nopass'){}
        if(role=='pass'){
          if (!flag) {
            this.$store.commit('add_tabs', { route: to.path, name: showName});
            this.$store.commit('set_active_index',  to.path);
          }
        }
      }
    },
    computed: {
      options() {
        return this.$store.state.options;
      },
      //动态设置及获取当前激活的tab页
      activeIndex: {
        get() {
          return this.$store.state.activeIndex;
        },
        set(val) {
          this.$store.commit('set_active_index', val);
        }
      }
    }

  };
</script>
<style type="text/css">
  .el-tabs--border-card>.el-tabs__content {
    padding: 0px;
  }
</style>
<style scoped>
  .main-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .main-aside-collapsed {
    /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    width: 64px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }

  .main-aside {
    width: 240px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }

  .main-header,
  .main-center {
    padding: 0px;
    border-left: 2px solid #333;
  }
</style>

3.LeftNav 主要是绑定tab页的点击事件，当点击左侧树形菜单的子选项时，就在右侧展示区打开一个新的tab页，如果该tab页已经存在的话，那么就激活该tab页。

<template>
  <el-menu  router :default-active="$route.path" default-active="2"  class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
            active-text-color="#ffd04b" :collapse="collapsed">
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu  :key="'id_'+m.treenodeid" :index="'id_'+m.treenodeid" v-for="m in menus">
      <template slot="title">
        <i :class="m.icon"></i>
        <span>{{m.treenodename}}</span>
      </template>
      <el-menu-item :key="'id_'+m2.treenodeid" :index="m2.url"  @click="showName(m2.treenodename)" v-for="m2 in m.children">
        <template slot="title">
          <i :class="m2.icon"></i>
          <span>{{m2.treenodename}}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
  export default {
    data() {
      return {
        collapsed: false,
        menus:[]//树形菜单
      }
    },
    created() { //钩子函数 对值重新进行渲染
      //获取Bus里存的值
      this.$root.Bus.$on('collapsed-side-click', (v) => {
        this.collapsed = v;
      })

      //拿取树形菜单数据
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      this.axios.post(url, this.ruleForm).then((response) => {
        console.log(response);
        this.menus = response.data.result;
      }).catch(function(error) {
        console.log(error);
      });
    },
    methods: {
      showName(name) {
        // 把菜单名称放进去，当成tab页的名称
        console.log(name)


        this.$store.commit('set_showName', name)
        this.$store.commit('set_role', "pass");
      }
    }
  }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }

  .el-menu-item-group__title {
    padding: 0px;
  }

  .el-menu-bg {
    background-color: #1f2d3d !important;
  }

  .el-menu {
    border: none;
  }

  .logobox {
    height: 40px;
    line-height: 40px;
    color: #9d9d9d;
    font-size: 20px;
    text-align: center;
    padding: 20px 0px;
  }

  .logoimg {
    height: 40px;
  }
</style>