美文网首页
vue两个版本及开始使用

vue两个版本及开始使用

作者: Adder | 来源:发表于2021-03-31 16:27 被阅读0次

    关于不同构建版本

    1. 完整版vue.js的视图是写在HTML里或template选项的,由于有 compiler(编译器)的存在,完整版运行时,用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

    2. 运行时版本vue.runtime.js,用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

    一般是配置: vue运行时+ vue-loader 等编译器的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。
    运行时runtime版本相比完整版体积要小大约 30%,所以项目中,应该尽可能使用这个版本。
    当然如果仍想使用完整版,则需要在打包工具里做相应的配置看官方怎么说

    // 需要编译器
    new Vue({
        el: "#app",
        template: `
        <div @click="add">{{n}} <button>+1</button></div>
       `,
        data: {
          n: 0
        },
        methods:{
        add(){
          this.n += 1
        }
      }
    })
    
    // 不需要编译器
    new Vue({
      render(h){
        return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
      },
      data: {
        n: 0
      },
      methods:{
        add(){
          this.n += 1
        }
      }
    })
    

    在线编辑器

    1. codesandbox上,可以很方便的新建编写vue项目
    • 进入选择“Vue”
    • 然后直接在components=> Helloworld下面一系列CRM操作,
    • 右侧就会随之更新视图
    • 点击File下的Export to ZIP ,导出到你想要存储的文件夹

    相关文章

      网友评论

          本文标题:vue两个版本及开始使用

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