zoukankan      html  css  js  c++  java
  • vue 运行时 + 编译器 vs. 只包含运行时

    https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时

    文档中的这个地方,说的不清楚

    If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build

    这部分的意思是对于以下情况会用到compiler:

      有指定template

      没指定template,也没指定render(这时候使用的就是被挂载元素的outerHtml

    所以,没有使用到compiler的情况只有:没有指定template,但指定了render。 这种情况并没有画到vue的生命周期图里,真的不容易发现。

    有时候我们会遇到这样的错误:

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

     以上提到,解决这个问题有两种方式。到谷歌必应上搜索,99%的都选择了后者,也就是使用全功能的vue(runtime+compiler),这个版本的vue文件相比仅包含runtime的版本体积要大,而且运行时的compile转换会消耗性能,compile过程其实可以放到构建过程中进行。

    总结就是:如果可以的话,尽量使用runtime版的vue文件。

    以下演示一个简单的runtime版vue项目 :

    项目初始化,前三个依赖是vue-loader的必备依赖

    npm init -y && npm install --save-dev css-loader vue-loader vue-template-compiler vue

    其余文件

    // app.vue
    <style scoped>
        .title{
            color:red;
            text-align: center;
        }
    </style>
    
    <template>
        <div class="title">
            这是标题
        </div>
    </template>
    
    <script>
        alert("标题初始化")
    </script>
    
    // index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="root">
            <app></app>
        </div>
    </body>
    <script src="bundle.js"></script>
    </html>
    
    // main.js
    import Vue from 'vue'
    import app from './app.vue'
    
    // new Vue({
    //     el:"#root",
    //     render:function(c){
    //         return c("app")
    //     },
    //     components:{
    //         app
    //     }
    // });
    
    // 两种初始化方式都可以
    new Vue(app).$mount("#root");
    
    // webpack.config.js
    module.exports = {
        entry: {
            bundle: './main.js'
        },
        output: {
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /.vue$/,
                    loader: 'vue-loader'
                }
            ]
        },
        resolve: {
            extensions: [".vue",".js",".json"],
            alias: {
                'vue$': 'vue/dist/vue.runtime.js',
            }
        },
    };

    以上项目能正常运行。

    compiler的作用在webpack引入 .vue文件的时候,就调用vue-loader来预处理过了,所以到了浏览器端运行的时候,仅仅引入vue.runtime就可以了

  • 相关阅读:
    Spring Web Flow 简介
    LeetCode:按序打印【1114】
    Java基础教程:多线程基础(5)——倒计时器(CountDownLatch)
    React:快速上手(8)——前后端分离的跨域访问与会话保持
    SpringBoot学习笔记:自定义拦截器
    Java进阶教程:垃圾回收
    SpringMVC:学习笔记(12)——ThreadLocal实现会话共享
    Node.js学习笔记(4):Yarn简明教程
    Docker:学习笔记(1)——核心概念及Ubuntu安装
    Java基础教程:内部类
  • 原文地址:https://www.cnblogs.com/hellohello/p/7894935.html
Copyright © 2011-2022 走看看