V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Vue.js
tctc4869
V2EX  ›  Vue.js

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

  •  
  •   tctc4869 · 127 天前 · 1723 次点击
    这是一个创建于 127 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    11 条回复    2021-08-03 18:05:17 +08:00
    catinsides
        1
    catinsides  
       127 天前
    vscode 里可以用 Vetur
    nervdy
        2
    nervdy  
       127 天前
    toesbieya
        3
    toesbieya  
       127 天前
    http-vue-loader 、组件打包成 umd 、起一个用于解析组件的 node 服务
    initd
        4
    initd  
       127 天前
    vue 作为运行时框架, 只要浏览器支持 ES6 就可以运行 vue 3.0 版本,不支持 ES6 的可以使用 vue 2 。
    vscode webstorm 都有插件支持。
    建议认真学习一下 vue 组件, 真要是项目内大量使用 vue 组件, 可以构建一个组件库,可以参考 element plus 。
    构建完成 其实也不需要 build, 写好的 vue 文件已经是组件了。可以写个 index.js 导出一下。之后导入 webstorm 有自动补全。
    initd
        5
    initd  
       127 天前
    需要 服务器端渲染, 直接访问单页应用 vue 路由 path,动态 static 文件,服务器请求数据库 等场景才需要用到 node 服务器。而其中又有相当一部分可以选择 go 做后端实现更好的性能,强类型。实在不行 iframe,
    Twinkle
        6
    Twinkle  
       127 天前
    codingguy
        7
    codingguy  
       127 天前
    模板写在 html 的 <script type="text/plain" id="id-1"></script> 里。然后组件的 html 就拿 id-1 里的 text
    tctc4869
        8
    tctc4869  
    OP
       127 天前
    @codingguy x-template?这个不是只能写在 html 文件里吗?
    codingguy
        9
    codingguy  
       127 天前
    @tctc4869 #8 是的。
    tctc4869
        10
    tctc4869  
    OP
       127 天前
    @codingguy 那这样会模板内容和页面混在一起。这样组件就和 html 绑定在一起了,我想能不能独立出来,至少非业务组件的代码内容不要在业务页面里,

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

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

    最理想的还是像楼上说的使用打包工具把 vue 文件打包成独立的 js 文件直接引入到页面。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3029 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:07 · PVG 09:07 · LAX 17:07 · JFK 20:07
    ♥ Do have faith in what you're doing.