vue项目技术小记

最近做的项目快要结尾了,本项目用前后端分离的,然后前端是用vue开发的,为什么选vue呢?一来公司要求效率要高些的,那就应该用到三大流行的框架之一,然后项目的内容不太复杂的,觉得用vue更合适的。二来正好应该要“炒熟”vue了哈。其中陷入了不少坑,一个一个爬过来的,总结下入坑的原因,另外会给出官方文档的对应内容,以便加深理解的。如有不足之处,请提出来哈~

  • 异步加载组件

    • 我们都知道vue一般都是单页面的,也就意味着一开始就要加载全部的组件,这太不友好的,加载时间会慢些。这时候我们就用到异步组件~
    const Index=()=>import('@/page/Index');
    const Home=()=>import('@/page/Home');
    const router=new Router({
        routes:[
        {
            path:'/index',
            component:Index
        },
        {
            path:'/home',
            component:Home
        }
        ]
    })
    

    然后你会发现js被分开的,这就是所谓的异步加载~

  • 在相同路由的情况下,再次点击导航栏上的本路由,再次刷新

    在vue中,路由地址相同的情况下,是不会再次刷新的,即使点击本路由的导航文字上。一开始我没想到解决的方案,后来寻求大佬商量,大佬说可以用事件传递的。然后他告诉我一句话的,

    vue.js一定不会阻碍传统方法实现的。

    这话说得我惭愧,我意识到我太依赖vue.js的框架,没拓展思维的。再次感谢大佬的点拔~

    • 对,是可以用事件传递来实现的。在主路由上绑定isFresh,判断需不需要刷新子路由,然后在子路由上绑定事件,传递到主路由的事件。主路由监听到事件的,就把isFresh变为false,以防下面还会需要到。不设置为false,下面的就不会刷新。看代码如下:
    • App.vue
    <router-view :isFresh="isFresh" @tempBtn="tempBtn"/>
    //data
    data(){
        return {
            isFresh:false,
        }
    }
    //事件函数
    tempbtn(){
        this.isFresh=false;
    }
    
    • Index.vue
    watch:{
        isFresh(){
            //console.log('ShopisFresh:'+this.isFresh);
            if(this.isFresh){
                Object.assign(this.$data,this.$options.data());
                this.fetchData();
            }
        }
    },
    //然后加载完后,还要绑定事件,传递到主路由的tempbtn事件
    this.$emit('tempbtn');
    

    嗯,在子路由上监听到isFresh为true,表示要刷新的,Object.assign是利用data的初始化数据覆盖,然后重新加载数据。

  • checkbox整体点击

    UI设计师要求能点击checkbox的整体,包括checkbox后面的文字,不是只能点击checkbox的框,这可把我为难了,然后艰难的爬出坑了。

    <div class="group_item" @click="selfChecked = !selfChecked">
        <input type="checkbox" v-bind:checked="selfChecked">
        <label>点我呀</label>
        data(){
            return {
                tempChecked:null
            }
        },
        props:['checked'],
        watch:{
            checked(){
                this.tmpChecked=this.checked
            }
        },
        computed: {
            selfChecked: {
                get: function(val){
                    return this.tmpChecked;
                },
                set: function(newVal){
                    this.tmpChecked = newVal
                    this.$emit('input', newVal)
                }
            }
        },
    </div>
    

    然后在父组件上用v-model即可。用selfChecked来判断是不是要点击,至于为什么要watch,是判断checked为真还是假,比如说在父组件上,提交后,表单要清空的,这时候要监听到checked为假的,然后传递到selfChecked的值。这样就能清空checkbox。

  • setInterval的问题

    用了setInterval之后,切换路由的时候发现还在计时,不得了,真的会影响性能唉,就吓的赶紧啃官方文档,找到了~

    beforeDestroy(){
        clearInterval(this.interId);
    }
    

    beforeDestroy是毁路由之前的函数,就是说毁路由之前就清除setInterval

    • 参考vue的生命周期
  • 在v-for循环中进行v-model数据绑定

    <div v-for="(item,index) in list">
        <textarea type="text" v-model="list[index]['content']"></textarea>
    </div>
    

下面说说和vue没关系的问题

  • 上线时去掉console

    我们一般都会用console来打印,以便检查的,万一console写多了,上线时总不能打印出console吧,要注释掉,但太费时间吧,这时候webpack神器上场(本人用webpack3)

    • 在webpack.prod.config.js中
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    

    这prod是生产环境的,然后drop_console为true,是去掉console

  • 兼容ie的问题

    部署到生产环境后,测试ie11时发现空白屏的,我慌了,不是说可以兼容到ie9吗?还是说没配置好的,然后google查,ie还没支持js新的api,比如promise,所以需要babel-polyfill来转换的。真是蛋疼的ie,还能怎么办呢?当然是加babel-polyfill插件的。

    npm install babel-polyfill --save
    //然后在webpack.base.config.js中引用这插件
    module.exports=require('babel-polyfill');
    module.export={
        ...
        entry:{
            app:['babel-polyfill','./src/main.js']
        }
    }
    
  • 打包第三方库

    打包时把第三方库合并成vendor.js,但是这个vendor.js有hash,这就意味着每次打包时vendor.js的hash会变化的,然后在浏览器会重新加载。vendor.js的代码本来就很少被改变的,重新加载就影响加载时间的。从目前搜索的解决方案,比较好的方案有两种:
    1、 第一种用dll来打包的,webpoack自带的

    • 首先在build里新建一个文件,命名为webpack-dll.config.js
    const webpack=require('webpack')
    const path=require('path')
    
    module.export={
        entry:{
            vendors:['vue.js','axios','vue-router','vuex','vue/dist/vue.esm.js']   //加入要打包的第三方库
        },
        output:{
            filename:'[name].dll.js',  //输入的文件名
            path:'path.join(__direname,'../static')',   //输入的路径
            library:'[name]'
        },
        plugin:[  //为了和第三方库的dll.js对应,build时不会把这个打包进去,就是说能减少build构建的时间
            new webpack.DllPlugin({
                path:path.join(__direname,'../','[name]-mainfest.json'),  //输入的mainfest文件的路径
                name:'[name]'
            })
        ]
    }
    
    • 然后命令生成vendor-mainfest.json
    //在package.json添加一行
    "dll":"webpack --config build/webpack.dll.config.js"
    

    然后npm run dll,就生成vendor-mainfest.json

    • 然后还要在webpack.base.conf.js配置,改变构建的配置
    //添加一行
    const mainfest=require('../vendors-mainfest.json')  //
    //在module.exports添加配置
    module.exports={
        ...
        plugins:[
            new webpack.DllReferencePlugin({
                mainfest
            })
        ],
        ...
    }
    

    然后把CommonsChunkPlugin的这块注释掉,不然要重复打包。

    • 最后在index.html加上一行
    <script src="./static/vendors.dll.js"></script>
    
    2、 第二种方案就是用bootcdn
    

推荐阅读更多精彩内容

  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 1,670评论 4 46
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 1,730评论 1 21
  • 一把年纪了,还是喜欢做一些没什么用的事。 还是喜欢看书,看来看去的,最后买回家的,多数还是纯文学的书,在这样一个文...
    铅笔芒种阅读 161评论 0 1
  • 我终于长大了。是个成年人了。 而你却老了,好老好老了。 你的老已经不是用皱纹来形容了。 而是记性,是话语,是行动。...
    甫萧鹏阅读 28评论 0 0
  • 5月回顾 001生活 5月重新租了房子,于是买了一个小电饭煲,试着自己给自己煮粥喝,早上终于不再只吃包子豆浆了。因...
    凉意的秋阅读 28评论 0 1