V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
azev
V2EX  ›  问与答

老 web 项目加几个页面 打算用用现代前端框架

  •  
  •   azev · 2020-11-22 09:44:29 +08:00 · 2516 次点击
    这是一个创建于 1457 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不想用那种前端工程项目编译发布的方式了
    就用了 cdn 脚本 试下来发现貌似 vue 比 react 更适合我这个情形?
    因为 vue 的话 引入脚本后 添加组件 直接在 html 内容里加标签元素就行了
    而 react 添加组件的方式是得用脚本组装添加 相对要麻烦些
    是不是这样?还是我没找到更好的方法?

    23 条回复    2020-11-23 09:38:39 +08:00
    TmacV2
        1
    TmacV2  
       2020-11-22 10:04:06 +08:00 via iPhone
    组件能复用吗
    aaronlam
        2
    aaronlam  
       2020-11-22 10:42:57 +08:00
    react 中最引以为傲的 jsx 需要使用 babel 来进行转译的,如果采用直接引入不是说不可以,但是没就了 jsx 这种语法糖了。
    vue 可以无缝的直接引入的原因是,因为他的写法就趋向于原生 JS 的写法,而且你通过直接引入的方式使用了组件库,不出意外你应该是全量引入了组件库。而如果你是采用前端工程编译形式的话,是可以进行按需引入的。
    gouflv
        3
    gouflv  
       2020-11-22 10:47:10 +08:00 via iPhone
    vue 当 jquery 用挺好的
    SergeGao
        4
    SergeGao  
       2020-11-22 11:27:46 +08:00
    不用 webpack 来写 vue 完全没那味了...试下 vue cli 吧,容易上手的
    azev
        5
    azev  
    OP
       2020-11-22 11:32:06 +08:00
    @aaronlam 是的 vue 应该是全量引入了
    react 的情况是即便不是用 jsx 也是用脚本引入组件 相对 vue 要麻烦点
    看官方示例是这样
    https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605
    aaronlam
        6
    aaronlam  
       2020-11-22 12:01:23 +08:00
    @azev 是的,我个人认为 react 从诞生的那一刻起就是为了颠覆以往写前端的方式,配合起一系列工具来完成 SPA 的编码。而 vue 的话,更多是为了能够让以前使用 jQuery 或者是说刚接触前端的人能无缝的使用上,所以就在设计之初就尽量把 API 还有写法都趋向于原生 JS 的方式,所以 vue 可以在某些情况下直接替代 jQuery,把 vue 直接引入当 jQuery 来用。

    是的,react 直接引入的确是比 vue 麻烦不少,而且正常来说也很少有人会这样使用,毕竟使都用上了 react 就是要品尝前端工具链带来的开发效率红利。但是实在要这样使用的话,都会直接选择 vue 来这样使用,vue 也强调了自己是渐进式的构建用户界面的框架,所谓的渐进式也在这一方面有所体现吧。
    aaronlam
        7
    aaronlam  
       2020-11-22 12:03:44 +08:00
    @azev 简单的来说就是 react 从设计之初就没有考虑,如何让你直接引入使用的时候会比较方便。
    charlie21
        8
    charlie21  
       2020-11-22 12:41:38 +08:00
    你说用 vue 你说用 react,若你离职了有人接手吗?
    跟你们公司内部商量去
    azev
        9
    azev  
    OP
       2020-11-22 14:17:57 +08:00
    @aaronlam 多谢
    azcvcza
        10
    azcvcza  
       2020-11-22 16:08:57 +08:00
    react 的话,你直接写 render 到 document 上也行,不过不如 vue 直接挂个文件就开写来得快
    murmur
        11
    murmur  
       2020-11-22 16:10:22 +08:00
    vue 直接挂包在 html 里写 template
    TmacV2
        12
    TmacV2  
       2020-11-22 16:22:10 +08:00 via iPhone
    @gouflv 那不是每个页面都要实例化一个 vue 对象吗 (新手不懂就问
    murmur
        13
    murmur  
       2020-11-22 16:23:23 +08:00
    @TmacV2 你停留在这个阶段就不要带入面向对象的东西,一个 vue 对象跟一个 jquery 对象对你有什么区别么,我们有的项目直接用空的 vue 对象做事件总线,对于 vue 最简单的形式,他就是一个高级模板带双向绑定,外加规范你一些东西应该写到哪里
    gouflv
        14
    gouflv  
       2020-11-22 16:29:24 +08:00 via iPhone
    @TmacV2 每个页面的模块和组件都是 vue 对象的嵌套,跟是不是多页无关
    TmacV2
        15
    TmacV2  
       2020-11-22 18:31:43 +08:00 via iPhone
    @gouflv 你说的对,然后还想问一下 以前写 vue 单组件文件 然后可以 import 导入使用 那 cdn 方式构建的 vue 项目应该怎么做能达到同样的效果呢
    TmacV2
        16
    TmacV2  
       2020-11-22 18:42:48 +08:00 via iPhone
    @murmur 以前写 vue 单组件文件 然后可以 import 导入使用 那 cdn 方式构建的 vue 项目应该怎么做能达到同样的效果呢
    muzuiget
        17
    muzuiget  
       2020-11-22 20:46:26 +08:00
    React 也可以直接用啊,不需要 JSX,JSX 不过是个语法糖。
    gouflv
        18
    gouflv  
       2020-11-22 20:59:47 +08:00 via iPhone
    @TmacV2 参考 jq plugin 的引入方式,只不过 vue 里面是走 Vue.component 注册
    suzic
        19
    suzic  
       2020-11-22 21:18:14 +08:00 via Android
    这种项目 vue 的确是最合适的,我也写过不少。组件复用的话,把.vue 的单文件稍微改一下就能做到了
    aaronlam
        20
    aaronlam  
       2020-11-22 21:25:50 +08:00
    @gouflv 在我认知里 vue 单文件,貌似在构建工具中是需要用 vue 的 loader 来进行特殊处理 template, script, style 三个部分的,直接的 vue 单文件应该是不能以 script 标签的形式挂载到页面使用的把?还是说有类似于早期的 babel 实时解析的 JS 库对其进行解析?我也不是很确定,所以想请指导一下。

    另外我看一般支持直接以 script 标签的形式挂载的 UI 组件库,但是经过构建工具打包后的全量包,所以还是对 vue 单文件可以以 script 的引入表示怀疑的态度。。
    TmacV2
        21
    TmacV2  
       2020-11-22 22:50:14 +08:00 via iPhone
    @suzic 能给个 demo 例子吗 .vue 单文件如何修改
    Maxcj
        22
    Maxcj  
       2020-11-23 09:26:28 +08:00
    上半年我司的一个旧 web 项目就是用引入 vue 进行增量开发的,每个页面一个 vue 实例。就有点类似是直接写 HTML 一样。
    xh520630
        23
    xh520630  
       2020-11-23 09:38:39 +08:00
    每个页面直接引 vue,都 new 一个实例
    写起来轻松又愉快
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3679 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 00:48 · PVG 08:48 · LAX 16:48 · JFK 19:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.