要编写一个 vue 组件,要在 html 文件里引入使用,有什么兼顾开发效率的封装组件的方法? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tctc4869
V2EX    Vue.js

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

  •  
  •   tctc4869 2021-08-03 10:5:40 +08:00 3642 次点击
    这是一个创建于 1531 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    11 条回复    2021-08-03 18:05:17 +08:00
    catinsides
        1
    catinsides  
       2021-08-03 11:05:40 +08:00
    vscode 里可以用 Vetur
    nervdy
        2
    nervdy  
       2021-08-03 11:17:40 +08:00
    toesbieya
        3
    toesbieya  
       2021-08-03 11:17:51 +08:00
    http-vue-loader 、组件打包成 umd 、起一个用于解析组件的 node 服务
    initd
        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 有自动补全。
    initd
        5
    initd  
       2021-08-03 12:55:43 +08:00
    需要 服务器端渲染, 直接访问单页应用 vue 路由 path,动态 static 文件,服务器请求数据库 等场景才需要用到 node 服务器。而其中又有相当一部分可以选择 go 做后端实现更好的性能,强类型。实在不行 iframe,
    Twinkle
        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
    tctc4869
        8
    tctc4869  
    OP
       2021-08-03 15:30:36 +08:00
    @codingguy x-template?这个不是只能写在 html 文件里吗?
    codingguy
        9
    codingguy  
       2021-08-03 16:13:48 +08:00
    @tctc4869 #8 是的。
    tctc4869
        10
    tctc4869  
    OP
       2021-08-03 17:23:26 +08:00
    @codingguy 那这样会模板内容和页面混在一起。这样组件就和 html 绑定在一起了,我想能不能独立出来,至少非业务组件的代码内容不要在业务页面里,

    或者你的意思是用类似原生的 html 组件的方式?把组件 js 代码和组件模板文件放到一个 html 文件里,然后用类似 link,scirpt 标签额度方式引入?
    codingguy
        11
    codingguy  
       2021-08-03 18:05:17 +08:00
    @tctc4869 #10 得看看你的页面组织方式了。如果说有后端的模板引擎,那就是像你说的以组件 html 作为主体。组件 html 里 script 引入组件的 js 或者直接包裹。然后页面通过后端模板引擎 include 组件的 html 。

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

    最理想的还是像楼上说的使用打包工具把 vue 文件打包成独立的 js 文件直接引入到页面。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2814 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 31ms UTC 13:26 PVG 21:26 LAX 06:26 JFK 09:26
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86