要编写一个 vue 组件，要在 html 文件里引入使用，有什么兼顾开发效率的封装组件的方法？

[tctc4869]

因为某些原因，要在 html 文件中，使用自己定义的组件。而且服务端不是 node.js

目前知道 html 引入 vue 组件的方法是在 js 文件里，写组件，但 js 里使用 es6 的字符串语法，会使编译器（比如 vscode ）对 es6 的字符串里的模板 html 标签语法和颜色不提示，这样的情况下对组件模板，编写起来比较麻烦。

对于这种情况下封装 vue 组件，有什么好方法吗？难道用后端的模板引擎？

[catinsides]

vscode 里可以用 Vetur

[nervdy]

https://cli.vuejs.org/zh/guide/build-targets.html#web-components-%E7%BB%84%E4%BB%B6
直接写单文件组件，然后构建成库或者 WC

[toesbieya]

http-vue-loader 、组件打包成 umd 、起一个用于解析组件的 node 服务

[initd]

vue 作为运行时框架， 只要浏览器支持 ES6 就可以运行 vue 3.0 版本，不支持 ES6 的可以使用 vue 2 。
vscode webstorm 都有插件支持。
建议认真学习一下 vue 组件， 真要是项目内大量使用 vue 组件， 可以构建一个组件库，可以参考 element plus 。
构建完成 其实也不需要 build， 写好的 vue 文件已经是组件了。可以写个 index.js 导出一下。之后导入 webstorm 有自动补全。

[initd]

需要 服务器端渲染， 直接访问单页应用 vue 路由 path，动态 static 文件，服务器请求数据库 等场景才需要用到 node 服务器。而其中又有相当一部分可以选择 go 做后端实现更好的性能，强类型。实在不行 iframe，

[Twinkle]

试试这个？ https://github.com/vuejs/petite-vue

[codingguy]

模板写在 html 的 <script type="text/plain" id="id-1"></script> 里。然后组件的 html 就拿 id-1 里的 text

[tctc4869]

@codingguy x-template?这个不是只能写在 html 文件里吗？

[codingguy]

@tctc4869 #8 是的。

[tctc4869]

@codingguy 那这样会模板内容和页面混在一起。这样组件就和 html 绑定在一起了，我想能不能独立出来，至少非业务组件的代码内容不要在业务页面里，

或者你的意思是用类似原生的 html 组件的方式？把组件 js 代码和组件模板文件放到一个 html 文件里，然后用类似 link，scirpt 标签额度方式引入？

[codingguy]

@tctc4869 #10 得看看你的页面组织方式了。如果说有后端的模板引擎，那就是像你说的以组件 html 作为主体。组件 html 里 script 引入组件的 js 或者直接包裹。然后页面通过后端模板引擎 include 组件的 html 。

如果组件以 js 为主体，就是得异步去拿 html 内容，这就涉及到 AMD 规范这堆东西了，需要确保页面 js 、组件 js 、组件模板的加载顺序，更加复杂。

最理想的还是像楼上说的使用打包工具把 vue 文件打包成独立的 js 文件直接引入到页面。