• 最佳实践
    • 适当的使用vuex
    • 不要过度使用CSS框架
    • 使用CDN来存放图片文件
    • js, css 尽量使用压缩
    • 灵活使用第三方Vue 插件
    • 前端逻辑务必简单
    • 不用写行末分号。
    • 灵活使用CSS,HTML预处理工具

    最佳实践

    适当的使用vuex

    能不用就不用。 能用就用。

    不要为了使用而使用,例如一个小方法就可以搞定的事情,搞出五个设计模式来实现。

    不要过度使用CSS框架

    因为CSS框架一般会大幅度增加文件体积。 例如 bootstrap, ele.me前端框架。 这个在低端安卓机上影响显著。 特别是使用Android中的 Webview 来加载H5页面时,基本上1k大小的CSS就会消耗1ms.

    而CSS框架动辄几百K,每次手机端都要等好久,才会打开对应的页面。

    使用CDN来存放图片文件

    例如, upyun 就是个不错的选择。 阿里的oss也很好。

    js, css 尽量使用压缩

    我们在nginx中可以设置这一项。 让js, css 都以zip的形式来发送和接收,一般都会有效减少30%-60%的体积和传送时间。 具体请参考nginx文档。

    灵活使用第三方Vue 插件

    例如: 轮播图, 表单验证等等。这些轮子都是现成的。

    好的程序员不一定算法好,但一定是一个对各种第三方组件见多识广的人。

    前端逻辑务必简单

    能在后台处理的,绝对不要放在前端处理。 因为Vuejs 擅长的不是处理数据结构。

    例如,前端需要展示一个列表的话,后端的接口就应该给出JSON中的数组, 而不是给出一个字符串,然后由前端去解析。

    不用写行末分号。

    Vuejs 源代码中没有一行有 “行末分号”。会有es 预处理器帮我们填上的。

    灵活使用CSS,HTML预处理工具

    我们知道,

    • JADE, HAML可以生成HTML,
    • SASS, SCSS,LESS可以生成CSS

    如果是公司的人数比较多,有UI, 有前端,那么建议大家使用的话要慎重。建议直接使用原生的HTML,CSS。 因为UI设计师同学不一定看得懂SCSS, JADE

    如果是一个人独立负责整个项目,那么用JADE, SCSS也没问题。