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

[TmacV2]

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

[VtoExtension]

写过一个 Demo，太不习惯了，除非以后插件支持
gitee.com/cloudfile/chat-vue/blob/master/src/components.js

[TmacV2]

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]

@VtoExtension 老铁 你这里面用了 es6 语法吧

[runze]

https://github.com/FranckFreiburger/http-vue-loader
@TmacV2 #3

[dfourc]

呃呃呃，我们是 cli 打包，然后把资源扔到 cdn 上面去

[mxT52CRuqR6o5]

是要古老一点的模块解决方案吗？ seajs 或 requirejs

[TmacV2]

@runze 6666

[TmacV2]

@mxT52CRuqR6o5 感谢 新手了解一下

[TmacV2]

@galikeoy 额 这个编译好放在本地没区别呀

[dfourc]

@TmacV2 #9 是啊，就是本地编译完扔 cdn

[beginor]

手写 AMD 模块， 用 require.js 或者 system.js 来加载。

或者直接写 es6 模块， 直接 import， 兼容性差点

[Q4h7388nR28s95fa]

大部分前端都是编译好后放到 cdn ；

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

https://gitee.com/haimadongli001/jQuery.Vue.js

[TmacV2]

@HiCode 十分感谢

[TmacV2]

@HiCode 已经用上了 真香

[Q4h7388nR28s95fa]

@TmacV2 我已经用在十几个 H5 项目中，老实说这样来开发效率高，执行效率也不算太低，没有太大的性能损耗。

[TmacV2]

你用了 Vue-rap 还是 jQuery.Vue.js ？

[TmacV2]

@HiCode 看你的头像发现第二个项目是你的 xd 🤒

[Q4h7388nR28s95fa]

@TmacV2 我一开始打算用 Vue-rap，学习一段时间后重构了 jQuery.Vue.js 自用。

[TmacV2]

@HiCode 哈哈哈 啥时候能支持一下嵌套理由 我跳转到 demo 里 temp 组件里 然后下面有菜单 根据菜单显示子路由 view https://i.loli.net/2020/11/24/6N9qiBDTlJeFpnr.jpg

[TmacV2]

@HiCode 你的项目里如果有没有需要一个页面根据不同标签页切换显示不同的 view 有的话你要怎么实现。
看了一下 vue-rap 项目 demo 的实例



https://i.loli.net/2020/11/24/2TWwhqMQGSrvPEz.jpg