vue工程初探Ⅰ

驰骋coding生涯四年,重来都没有想过要给自己所学之技可以自成一家之言,直到去年进入了css公司,遇到了WK架构师,他的一番之言让我醍醐灌顶,拨开云雾睹青天.于是今天的博客之作也算是由来已久了.未来,也许会有如今天一时冲动的写作,也许再也没有.但我相信,有我的她在身边一直默默的支持和鼓励,终将冲破层层艰难困苦.嘴不言谢,只要心中知恩.

vue学习之路简史

我本后端攻城狮,勤耕于spring系列,不求闻达于node.ZJ大神不以我半道出家web前端为卑鄙.手把手精心给我讲node + webpages的来龙去脉以及vue的今生前世.颇感兴趣.于是web突飞猛进,加之spring cloud系列的深究,实现双壁合一,熟练前后端分离之道.

vue学习之路新篇章

(一)起初,项目的时间紧急度过高,故没有深究性能和更高效的开发细节.后来时机成熟了便重构框架,加之半制动编程,让加班变得越来越不可能.用过vue的都知道,vuex是用来管理数据状态的,既是项目公共变量,工程里的任何组件都可以从中获取到值,其在整个项目里面是共享的,但是不好的一点是如果F5,浏览器一刷新后所有的值都会打回原形.为了防止浏览器刷新导致数据丢失,笨的办法我们只好把重要的东西保存到window.sessionStorage或者 window.localStorage里.但是如果使用太多,那么页面加载性能真的很慢.那么有没有一种一劳永逸的办法呢?答案是肯定的.我们必要的一些东西放到vuex里面,然后再App.vue里面加这么一段代码就可以了:

created() {
    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("pageInfo") &&
      this.$store.replaceState(
        Object.assign(
          this.$store.state,
          JSON.parse(localStorage.getItem("pageInfo"))
        )
      );

    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload", () => {
      localStorage.setItem("pageInfo", JSON.stringify(this.$store.state));
    });
  }

如此一来,页面上基本没有使用localStorage或者sessionStorage的必要了.当然还有一个地方我尚未找到解决的办法,那就是:

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {
    //是校验的路由
    //let token = window.localStorage.getItem('token')
    let token = store.state.token || window.sessionStorage.getItem('token')
    if (token) {
      next()
    } else {
      if (to.path == '/login') {
        next()
      } else {
        next({
          path: '/login',
          query: { redirect: to.fullPath }
        })
      }
    }
  } else {
    next()
  }
})

let token = store.state.token || window.sessionStorage.getItem(‘token’)这一行代码也算是计较蠢的了.

(二) 新建两个文件,分别是.env.development和.env.production.她两里面的键是一样的,值当然配置开发和打包生产的,比如:

VUE_APP_TEST1 = "http://10.10.18.102:8080"
VUE_APP_TEST1 = "http://10.10.18.112:8080"

VUE_APP_为前缀,必须的,官方都这么说了,我能有什么办法.
<1>index.html的使用:

<input type="hidden" name="" id="url-input" value="<%= process.env.VUE_APP_TEST1 %>">

<2>.js里面的使用:

`${process.env.VUE_APP_TEST1}`

<3>如果一个前端项目使用多个后台的数据,那么这么干吧:
在axios.js配置如下:

baseURL: `${process.env.VUE_APP_TEST1}`,

在api.js的文件配置如下:

let gwcsUrl = `${process.env.VUE_APP_TEST1}`
let wdglUrl = `${process.env.VUE_APP_TEST2}`
//获取权限地址本列表
const getAddressList = params => {
    return axios.post(gwcsUrl + `/group/config/list?systemCode=szxtbg&userId=` + params.userId);
}
//获取新的组织机构数据
const getnewTreeData = (params) => {
    return axios.post(wdglUrl + `/group/config/newGroup?systemCode=szxtbg&nmId=${params.id}&groupId=${params.groupId}&userId=${params.userId}`);
}

<4>全文搜索高亮代码:

<span v-html="brightenKeyword('',doc.vcOperName)">{{doc.vcOperName}}</span>
brightenKeyword(vcOfficialType, vcTitle) {
      let searchText = this.form.keywords ? this.form.keywords : "";
      let newVcOfficialType = "";
      let newVcTitle = "";

      for (var index = 0; index < vcOfficialType.length; index++) {
        var element = vcOfficialType.charAt(index);
        var elementUp = element.toLowerCase();
        var elementLo = element.toUpperCase();
        let isHave = false;
        for (let i = 0; i < searchText.length; i++) {
          const ele = searchText.charAt(i);
          if (
            ele.indexOf(element) == 0 ||
            ele.indexOf(elementLo) == 0 ||
            ele.indexOf(elementUp) == 0
          ) {
            isHave = true;
          }
        }
        if (isHave) {
          newVcOfficialType =
            newVcOfficialType + "<font color='red'>" + element + "</font>";
        } else {
          newVcOfficialType = newVcOfficialType + element;
        }
      }
      for (var index = 0; index < vcTitle.length; index++) {
        var element = vcTitle.charAt(index);
        var elementUp = element.toLowerCase();
        var elementLo = element.toUpperCase();
        let isHave = false;
        for (let i = 0; i < searchText.length; i++) {
          const ele = searchText.charAt(i);
          if (
            ele.indexOf(element) == 0 ||
            ele.indexOf(elementUp) == 0 ||
            ele.indexOf(elementLo) == 0
          ) {
            isHave = true;
          }
        }
        if (isHave) {
          newVcTitle = newVcTitle + "<font color='red'>" + element + "</font>";
        } else {
          newVcTitle = newVcTitle + element;
        }
      }

      // if (vcOfficialType) {
      //   vcOfficialType = "【" +(newVcOfficialType ? newVcOfficialType : vcOfficialType)+"】";
      // } else {
      //   vcOfficialType = newVcOfficialType;
      // }
      // let text = vcOfficialType+(newVcTitle ? newVcTitle : vcTitle);
      let text = newVcTitle ? newVcTitle : vcTitle;
      return text;
    },

引用

[1]https://blog.csdn.net/aliven1/article/details/80743470