Vue笔记十:Vue-cli3.0

作者: brandonxiang | 来源:发表于2018-08-14 22:53 被阅读48次

    有很多开发者在等着Vue3.0的到来,但是大版本的升级往往意味着 upgrade gap,这意味着以前的项目升级的风险。盼着盼着却盼来了Vue3.0的到来,在半年的beta迭代后,终于出了正式版本。

    vue init 兼容

    刚开始试用vue-cli3.0的时候,我感觉到非常反感。因为我好不容易把webpack2、3、4的配置搞懂了,尤大大你居然把webpack的配置去掉了。

    这种情况下,兼容以前的模版是所有人要考虑到的兼容,如果我们还能够拉取以前的模版就非常好了。vue-cli的解耦设计非常好,桥接工具(@vue/cli-init)很好兼容旧版本的vue init功能。

    npm install -g @vue/cli-init
    # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
    vue init webpack my-project
    

    基础教程

    • vue create 新建项目
    • vue add 增加插件
    • vue serve 开发模式
    • vue build 构建项目

    这部分请移步 Vue-cli 3.0文档,内容非常详细

    vue ui 新功能

    万万没想到的是vue ui,Guillaume CHAU(Vue.js 核心团队)给脚手架带来不仅可以创建新项目,还可以管理项目中的插件和任务。


    image.png

    未来

    babel转义(参考

    babel转义成为ES6的代码转义成为ES5的语法,如今很多浏览器已经支持原生es-module,在不考虑兼容老版本浏览器的情况下,modern压缩方式会大幅减少包的体积,提高加载的效率。

    vue-cli-service build --modern
    

    单个vue文件调试或打包(

    vue-cli提供了针对某个vue文件启动服务,方便开发者局部调试。

    vue serve MyComponent.vue
    

    vue-cli并不仅仅针对项目进行打包,还可以对某个vue,js或者ts文件进行打包。这种打包方式可以应用于组件库的打包。

    vue-cli-service build --target lib --name myLib [entry]
    

    准备微前端

    Web Components 模式不支持 IE11 及更低版本,可以把vue文件打包直接成为Web Components,是微前端做准备,有利于未来项目解耦和多框架融合。

    vue-cli-service build --target wc --name my-element [entry]
    

    参考

    相关文章

      网友评论

      • 小乌龟变王八:最近在学习vue-cli 3.0 搭建,有些不懂得地方可以加你询问一下吗?
      • 四爷在此:确实不错,比2.x更考虑了实用性

      本文标题:Vue笔记十:Vue-cli3.0

      本文链接:https://www.haomeiwen.com/subject/qybebftx.html