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

• 資深大佬 : 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

• 資深大佬 : galikeoy

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

• 資深大佬 : mxT52CRuqR6o5

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

• 主 資深大佬 : TmacV2

  @runze 6666

• 主 資深大佬 : TmacV2

  @mxT52CRuqR6o5 感谢 新手了解一下

• 主 資深大佬 : TmacV2

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

• 資深大佬 : galikeoy

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

• 資深大佬 : beginor

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

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

• 資深大佬 : HiCode

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

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

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

• 主 資深大佬 : TmacV2

  @HiCode 十分感谢

• 主 資深大佬 : TmacV2

  @HiCode 已经用上了 真香

• 資深大佬 : HiCode

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

• 主 資深大佬 : TmacV2

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

• 主 資深大佬 : TmacV2

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

• 資深大佬 : HiCode

  @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

• 資深大佬 : HiCode

  @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'”来控制跳转到不同的页面。