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)=>