将.vue文件编译为.js文件,不带webpack或browserify [英] Compile .vue file into .js file without webpack or browserify

查看:249
本文介绍了将.vue文件编译为.js文件,不带webpack或browserify的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有办法在没有webpack或browserify的情况下将.vue文件编译成.js文件?我知道webpack或browserify的优点,但我只想要最简单的方法来编译.vue文件。例如,我有一个文件组件 comp.vue 符合 comp.js (编译器应该能够在.vue文件中编译sass和pug)然后我可以在我的应用程序中使用它,如下所示:

Is there any way to compile .vue file into .js file without webpack or browserify? I know the goodness of webpack or browserify but I just want the simplest way to compile the .vue file. For example, I have a single file component comp.vue complied into comp.js (the compiler should be able to compile sass and pug in .vue file) and then I can use it in my app like below:

<head>
    <script src="vue.min.js"></script>
    <script src="comp.js"></script> //it may pack the whole component into variable comp and add the style
    <script>
        Vue.component('comp', comp);
        window.onload = function() {
            new Vue({el: '#app'});
        }
    </script>
</head>
<body id='app'>
    <comp></comp>
</body>

或其他类似/更简单的方式?

or other similar/simpler way?

推荐答案

vue-cli 工具(版本2.8.0)有 build 命令,您可以运行该命令来构建单个组件。

The vue-cli tool (version 2.8.0) has a build command that you can run to build an individual component.

vue build Component.vue --prod --lib




这将创建一个UMD格式的优化包,并且
导出库的名称设置为Component,您可以使用--lib
[CustomLibraryName]来自定义它。

This will create an optimized bundle in UMD format, and the name of exported library is set to Component, you can use --lib [CustomLibraryName] to customize it.

您可以使用构建的脚本并将其包含在您的文件中,就像您在问题中一样。从技术上讲,它确实使用了引擎盖下的webpack,但你不必配置任何东西。

You can take the built script and include it in your file like you are in your question. Technically it does use webpack under the hood, but you do not have to configure anything.

这篇关于将.vue文件编译为.js文件,不带webpack或browserify的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆