要编写一个 vue 组件，要在 html 文件里引入使用，有什么兼顾开发效率的封装组件的方法？
tctc4869 · 2021-08-03 10:58:40 +08:00 · 3222 次点击这是一个创建于 1218 天前的主题，其中的信息可能已经有所发展或是发生改变。
因为某些原因，要在 html 文件中，使用自己定义的组件。而且服务端不是 node.js
目前知道 html 引入 vue 组件的方法是在 js 文件里，写组件，但 js 里使用 es6 的字符串语法，会使编译器（比如 vscode ）对 es6 的字符串里的模板 html 标签语法和颜色不提示，这样的情况下对组件模板，编写起来比较麻烦。
对于这种情况下封装 vue 组件，有什么好方法吗？难道用后端的模板引擎？
 |
1
catinsides 2021-08-03 11:05:40 +08:00
vscode 里可以用 Vetur
|
 |
2
nervdy 2021-08-03 11:17:40 +08:00
https://cli.vuejs.org/zh/guide/build-targets.html#web-components-%E7%BB%84%E4%BB%B6
直接写单文件组件，然后构建成库或者 WC |
 |
3
toesbieya 2021-08-03 11:17:51 +08:00
http-vue-loader 、组件打包成 umd 、起一个用于解析组件的 node 服务
|
 |
4
initd 2021-08-03 12:45:14 +08:00
vue 作为运行时框架， 只要浏览器支持 ES6 就可以运行 vue 3.0 版本，不支持 ES6 的可以使用 vue 2 。
vscode webstorm 都有插件支持。 建议认真学习一下 vue 组件， 真要是项目内大量使用 vue 组件， 可以构建一个组件库，可以参考 element plus 。 构建完成 其实也不需要 build， 写好的 vue 文件已经是组件了。可以写个 index.js 导出一下。之后导入 webstorm 有自动补全。 |
|
5
initd 2021-08-03 12:55:43 +08:00
需要 服务器端渲染， 直接访问单页应用 vue 路由 path，动态 static 文件，服务器请求数据库 等场景才需要用到 node 服务器。而其中又有相当一部分可以选择 go 做后端实现更好的性能，强类型。实在不行 iframe，
|
 |
6
Twinkle 2021-08-03 13:11:53 +08:00
|
 |
7
codingguy 2021-08-03 14:04:36 +08:00
模板写在 html 的 <script type="text/plain" id="id-1"></script> 里。然后组件的 html 就拿 id-1 里的 text
|
Select Language