Vue-cli踩坑与优化小记

之前用vue-cli写过项目,但是隔了一段时间再次接触的时候,发现很多都忘了,翻了一下自己笔记,写的都是无关紧要的东西,完完全全可以在官方文档查到。这次开发遇到了很多问题,记忆中有些许印象,但就是想不起来,搜索、解决问题的时间就占去了很多,为了方便以后开发,就写下这篇文章记录一下我在项目开发中碰到的一些情况,以及我所使用到的某些性能优化的方法,后续碰到问题会继续更新此文章。

前言

空余时间自己尝试node全栈开发,就随便写了个项目练练手,我也是纯粹想体验、学习从数据库到node到前端再到网站部署再到性能优化整一个过程。再后来负责公司一个项目,从前台到后台到数据库,后台管理系统是用vue+element做的,这篇文章就记录下这两个项目遇到的一些坑以及可以优化的点,不做详细描述,关于网站部署的介绍请移步至本博客的另一篇文章CentOS 7.4 从0到1部署node项目

踩坑记录

  1. 项目开始的时候尝试了很多个vue的组件库,真的太坑了,写的文档是什么鬼,和使用根本不一样,是懒得更新么?反正有很多你即使按着官方文档去起步,也运行不了。所以选一个合适的组件库作为主题样式很重要,切记不要因为ui好看或者组件多一点就轻易抉择,一定要先测试!权衡一下那些坑能不能解决,解决的时间成本值得不值得;

  2. <template>只能有一个根元素;

  3. v-for记得加上唯一的key

  4. v-cloak配合样式使用防止变量闪烁

    1
    2
    3
    4
    5
    6
    7
    [v-cloak] {
    display: none; /*建议全局使用*/
    }

    <div v-cloak>
    {{ message }}
    </div>
  1. 导入其他组件库需在import App from './App'这句之前,否则会出现自己写的样式无法覆盖组件样式;

  2. 页面引入其他组件,需要先在components注册

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <template>
    <div id="photos">
    <!--使用组件-->
    <photo-preview :images = "item.images | imgArr"></photo-preview>
    </div>
    </template>

    import PhotoPreview from '../components/PhotoPreview' //引入组件

    export default {
    name: 'photos',
    data() {
    return {
    }
    }
    },
    methods: {
    },
    filters: {
    },
    components: {
    'photo-preview': PhotoPreview //注册组件
    }
    }
  1. 打包后页面通过文件直接打开显示空白,找不到对应的js和css。修改打包路径,把config/index.js中的 assetsPublicPath: '/' 改为 './';

  2. 打包后部分字体文件找不到,修改字体打包配置,在webpack.base.conf.js里面的rules找到字体打包的option修改limit,要改大,把10000改为90000 ;

  3. 全局使用axios可以绑定在vue原型方法上

    1
    2
    import axios from 'axios'
    Vue.prototype.$ajax= axios

    或者多安装vue-axios,然后像 vue-resource 那样使用

    1
    2
    3
    4
    import axios from 'axios'
    import VueAxios from 'vue-axios'

    Vue.use(VueAxios,axios);
  4. axios跨域要修改config/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dev: {
加入以下代码
proxyTable: {
'/api': {
target: 'http://localhost:3000',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/'
//这里理解成客户端以'/api'开头的请求把'/api'通通换成'/',
//后面我们调接口时直接用'/api'代替 比如我要调
//用'http://localhost:3000/user/add',直接写'/api/user/add'即可
//要是后台配置的接口就是'http://localhost:3000/api/'这样,pathRewrite可省略不写
}
}
},
  1. axios请求中发现this没有指向vue,请使用箭头函数或者在axios函数以外保存好this指针;

  2. 在.vue文件局部样式(style scoped)中修改了组件库样式没有生效,加个穿透试试

    1
    2
    3
    .el-date-editor /deep/ input{
      padding-left:30px;
    }
  1. 其他浏览器正常,ie9下报错,兼容IE9以上需要安装babel-profill插件,然后在页面入口配置main.js中引入 babel-polyfill:import 'babel-polyfill'

  2. 修改数据后想要马上获取更新后的DOM ,请在nextTick中执行,在官网中的描述是:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

性能优化

  1. 使用v-if减少不必要的组件加载,可以配合keep-alive使用提高性能,也可配合transition使用,提高用户体验;

  2. 首屏加载优化,vue路由懒加载

    1
    2
    3
    4
    5
    6
    7
    8
    9
    export default new Router({
    routes: [
    {
    path: '/',
    name: '首页',
    component: resolve => require(['@/components/Home.vue'], resolve)
    },
    ]
    })
  3. 打包后文件比较大,默认会生成的.map文件,是为了报错时能显示第几行,不需要可以改配置,在config/index.js 中找到productionSourceMap,值修改为false,减小打包后文件大小;

  4. vendor.js文件过大,出现首屏加载慢。一些诸如moment、jQuery、element之类的引入可以采用CDN方式,不必打包到vendor.js中,这样往往可以缩短请求时间

    首先在index.html中添加

    1
    2
    3
    4
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>

    然后在build/webpack.base.config.js 中添加externals

    1
    2
    3
    4
    5
    6
    7
    8
    module.exports = {
    externals: {
    'vue':'Vue',
    'vue-router':'VueRouter',
    'moment':'moment',
    'axios':'axios',
    },
    }

    网上找到的文章说是最后要注释关于以上引入文件的import和Vue.use(xxx),否则还是会照样打包,但是我没有注释,打包后文件也明显减少了,反而是注释掉之后各种报错,这个我想可能是版本原因或者是自己多注释了什么吧。反正效果有了就行,后面再看看能不能找到原因。

  5. 觉得请求的js、css文件还是有点慢,可以开启Gzip,对于支持gzip的浏览器,请求时间大大缩短了。首先安装 compression-webpack-plugin : cnpm install --save-dev compression-webpack-plugin,然后是在config/index.js中找到productionGzip,值改为true。之后执行npm run build,就会发现打包后的css和js都会多一个.gz结尾的文件,放在服务器上的项目,白屏一晃而过页面就加载出来了。

  6. 上传的图片太大,显示不出来。上传前对图片进行压缩后再存储到服务器中;

  7. 编程式导航,尽量采用name属性指定路由,这样只要name不修改,修改路由的路径只需要修改一处,维护起来更方便;

  8. 对于一些不常改变的数据可以保存在本地存储中,减少不必要的请求;

  9. 多个组件用到对数据进行类似的格式处理,不妨抽出来一个全局过滤器。

坚持原创技术分享,您的支持将鼓励我继续创作!
0%