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

cdn 方式构建的 vue 项目怎么自定义组件及复用

  •  
  •   TmacV2 · 2020-11-22 20:33:12 +08:00 via iPhone · 3153 次点击
    这是一个创建于 1463 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用脚手架的项目,.vue 单组件文件可以导入实现复用。 那 cdn 方式的项目怎么搞? 想了想可以把组件选项写在 js 文件中 然后用到的时候引用一下 js 文件进行组件注册?

    31 条回复    2022-04-30 15:31:31 +08:00
    VtoExtension
        1
    VtoExtension  
       2020-11-22 20:40:59 +08:00
    写过一个 Demo,太不习惯了,除非以后插件支持
    gitee.com/cloudfile/chat-vue/blob/master/src/components.js
    TmacV2
        2
    TmacV2  
    OP
       2020-11-22 20:45:27 +08:00
    a.js

    function Test() {
    return {
    template: '<div @click="handle">{{data}}</div>',
    data: function () {
    return {
    data: 1
    };
    },
    methods: {
    handle(){
    this.data+=5;
    }
    }
    }
    }

    index.html

    <div id="app">
    <Child></Child>
    </div>
    <script>
    // 注册
    var Child = Test();
    Vue.component('course-sort', Test())
    // 创建根实例
    new Vue({
    el: '#app',
    components: {
    Child
    }
    })
    </script>
    TmacV2
        3
    TmacV2  
    OP
       2020-11-22 21:14:19 +08:00 via iPhone
    @VtoExtension 老铁 你这里面用了 es6 语法吧
    runze
        4
    runze  
       2020-11-22 21:18:52 +08:00
    galikeoy
        5
    galikeoy  
       2020-11-22 21:22:00 +08:00
    呃呃呃,我们是 cli 打包,然后把资源扔到 cdn 上面去
    mxT52CRuqR6o5
        6
    mxT52CRuqR6o5  
       2020-11-22 21:24:22 +08:00 via Android
    是要古老一点的模块解决方案吗? seajs 或 requirejs
    TmacV2
        7
    TmacV2  
    OP
       2020-11-22 22:01:32 +08:00 via iPhone
    @runze 6666
    TmacV2
        8
    TmacV2  
    OP
       2020-11-22 22:01:46 +08:00 via iPhone
    @mxT52CRuqR6o5 感谢 新手了解一下
    TmacV2
        9
    TmacV2  
    OP
       2020-11-22 22:04:38 +08:00 via iPhone
    @galikeoy 额 这个编译好放在本地没区别呀
    galikeoy
        10
    galikeoy  
       2020-11-22 23:00:27 +08:00
    @TmacV2 #9 是啊,就是本地编译完扔 cdn
    beginor
        11
    beginor  
       2020-11-23 08:32:47 +08:00 via Android
    手写 AMD 模块, 用 require.js 或者 system.js 来加载。

    或者直接写 es6 模块, 直接 import, 兼容性差点
    HiCode
        12
    HiCode  
       2020-11-23 09:20:52 +08:00
    大部分前端都是编译好后放到 cdn ;

    假定你不想要编译,在 html 页面中直接加载使用 vue 组件,可以参考下面项目:
    https://gitee.com/tengzhinei/Vue-rap

    https://gitee.com/haimadongli001/jQuery.Vue.js
    TmacV2
        13
    TmacV2  
    OP
       2020-11-23 11:57:49 +08:00 via iPhone
    @HiCode 十分感谢
    TmacV2
        14
    TmacV2  
    OP
       2020-11-23 18:21:09 +08:00 via iPhone
    @HiCode 已经用上了 真香
    HiCode
        15
    HiCode  
       2020-11-23 22:47:51 +08:00
    @TmacV2 我已经用在十几个 H5 项目中,老实说这样来开发效率高,执行效率也不算太低,没有太大的性能损耗。
    TmacV2
        16
    TmacV2  
    OP
       2020-11-24 07:56:46 +08:00
    你用了 Vue-rap 还是 jQuery.Vue.js ?
    TmacV2
        17
    TmacV2  
    OP
       2020-11-24 08:36:53 +08:00 via iPhone
    @HiCode 看你的头像发现第二个项目是你的 xd 🤒
    HiCode
        18
    HiCode  
       2020-11-24 09:12:58 +08:00
    @TmacV2 我一开始打算用 Vue-rap,学习一段时间后重构了 jQuery.Vue.js 自用。
    TmacV2
        19
    TmacV2  
    OP
       2020-11-24 09:39:01 +08:00 via iPhone
    @HiCode 哈哈哈 啥时候能支持一下嵌套理由 我跳转到 demo 里 temp 组件里 然后下面有菜单 根据菜单显示子路由 view https://i.loli.net/2020/11/24/6N9qiBDTlJeFpnr.jpg
    TmacV2
        20
    TmacV2  
    OP
       2020-11-24 11:01:09 +08:00 via iPhone
    @HiCode 你的项目里如果有没有需要一个页面根据不同标签页切换显示不同的 view 有的话你要怎么实现。
    看了一下 vue-rap 项目 demo 的实例



    https://i.loli.net/2020/11/24/2TWwhqMQGSrvPEz.jpg
    HiCode
        21
    HiCode  
       2020-11-25 04:57:05 +08:00
    @TmacV2

    “一个页面根据不同标签页切换显示不同的 view ”,不太确定你说的是不是类似 vant 里面的 tab 标签页功能:

    https://youzan.github.io/vant/#/zh-CN/tab

    tab 标签页的话比较好实现,页面内用一个变量简单控制不同内容的展示即可(v-if 或 v-show),在点击标签按钮时更改这个变量的值,就会自动切换。

    如果你说的“一个页面根据不同标签页切换显示不同的 view ”是指 Vue-rap 里的 layout,可以用公共组件+状态变量来实现。参考 menu.vue ,这个组件监测 menu_active 值的变化。其他引用此组件的页面,在各个页面 mounted 事件中通过 store.set_menu_active 函数修改 menu_active 的值。这样 menu.vue 组件就会自动菜单状态。

    而 menu.vue 里面,则可以通过 v-link="'pages/main'"来控制跳转到不同的页面。
    TmacV2
        22
    TmacV2  
    OP
       2020-11-25 12:21:41 +08:00 via iPhone
    例如 menu 组件里标签栏有四个导航标签 ,我就做四个 view 组件,每个组件都引用 menu 组件 。在这些 view 组件各个页面 mounted 事件中通过 store.set_menu_active 函数修改 menu_active 的值吗
    那会产生 4 个 menu 组件实例 好像也不对。

    第一次做前端项目 提问有点幼稚 请见谅哟
    TmacV2
        23
    TmacV2  
    OP
       2020-11-25 12:23:51 +08:00 via iPhone
    @HiCode 例如 menu 组件里标签栏有四个导航标签 ,我就做四个 view 组件,每个组件都引用 menu 组件 。在这些 view 组件各个页面 mounted 事件中通过 store.set_menu_active 函数修改 menu_active 的值吗 那会产生 4 个 menu 组件实例 好像也不对。第一次做前端项目 提问有点幼稚 请见谅哟
    HiCode
        24
    HiCode  
       2020-11-25 18:17:39 +08:00
    @TmacV2 你的理解没有错,确实会存在 4 个 menu 的实例。我最近打算搞 PC 后台类的系统页面,会增加 layout 的功能。
    TmacV2
        25
    TmacV2  
    OP
       2020-11-25 18:44:24 +08:00 via iPhone
    @HiCode 期待你的更新 回复你之前我想了一下午 最终没想出答案 所以还是问你了
    TmacV2
        26
    TmacV2  
    OP
       2020-11-25 18:48:41 +08:00 via iPhone
    @HiCode 大佬 有没有基于 vue 的 demo 给我学习学习 前端知识点也挺多的 想快点上手
    HiCode
        27
    HiCode  
       2020-11-26 00:27:04 +08:00
    @TmacV2 我自己的学习路径是看各个 vue ui 框架的代码和他们的实现,参考学习他们的思路,例如

    https://github.com/heyui/heyui

    https://github.com/heyui/heyui-admin

    成长比较大还是要靠实际项目,一般我先设定自己想要做什么东西,然后这个东西有哪些项目可以参考,就去看他们思路,然后对着抄一份作业。哈哈哈哈哈哈,所以实在谈不上是大佬。

    我其实是 PHP 后端来的,不过现在也准备用 deno,全面改 js 了。
    TmacV2
        28
    TmacV2  
    OP
       2020-11-26 11:44:43 +08:00 via iPhone
    @HiCode 我去码云上找一些简单的后台管理 vue 项目观摩学习一下先
    TmacV2
        29
    TmacV2  
    OP
       2021-02-23 20:41:05 +08:00 via iPhone
    @HiCode 老哥 看到你更新了 jqvue 项目了
    HiCode
        30
    HiCode  
       2021-02-24 14:15:33 +08:00
    @TmacV2 谢谢支持,嗯……我春节撸了一个新的,https://gitee.com/haimadongli001/vue-web-loader

    这个可以直接支持 vue-router,并且可以通过 kbone 编译成小程序。

    当然,为了保证兼容性 vue 组件里面还是要按 es5 的格式去写,用 es6+部分浏览器会不兼容。

    哈哈哈哈哈,谢谢支持!
    TmacV2
        31
    TmacV2  
    OP
       2022-04-30 15:31:31 +08:00
    @HiCode 老哥,你 https://gitee.com/haimadongli001/vue-web-loader 这个项目能开放给我 fork 一下吗? 找不到了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   900 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:47 · PVG 04:47 · LAX 12:47 · JFK 15:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.