为了账号安全,请及时绑定邮箱和手机立即绑定

创建一个包含一些组件的 Javascript 包以供重用

创建一个包含一些组件的 Javascript 包以供重用

慕尼黑8549860 2023-03-03 10:20:06
我有一个后端渲染页面(django,以防万一)我想使用 PrimeVue 的一些组件和打包为 vue 组件的 markdown 编辑器对其进行一些改进。现在,我们有一些使用 jquery 的小动画,为此我们将来自 CDN 的 jquery 直接包含到我们的页面中。几个月前,我们需要使用更多客户端交互来为页面增添趣味,我们通过 CDN 将 vue.js 添加到该页面(删除 jquery),然后在我们也从中加载的 index.js 中编写了一些 javascript CDN 并完成了我们的工作。这是目前的情况。该页面目前看起来像这样<html>  .... <script src="https://cdn/vue.js"></script> <script src="/static/index.js"></script>div#mainvue是 vue 运行并执行其所需操作的地方。这就是我们现在所在的位置。使用普通的 vue 是可以的。现在,我想加入一些来自 primevue 的组件以及包装为 vue 组件的第 3 方降价编辑器。我想将所有这些以及普通的 vue 本身捆绑到一个单独的 javascript 包中,我可以把它扔到 CDN 上并包含到我的所有页面中。然后我的开发人员可以在index.js.这是一种合理的方法吗?如果是,我该怎么做?我不熟悉 javascript 生态系统。如果不是,解决这个问题的正确方法是什么。我不想一路走下去 SPA 和 REST API。我只想在一个简单的后端渲染页面上使用一些第 3 方组件和 vue。
查看完整描述

1 回答

?
繁花如伊

TA贡献2012条经验 获得超12个赞

既然你提到你不想“一路走下去 SPA”,一个合理的混合是在 MPA(多页应用程序)模式下使用 Vue。这将需要使用 vue-cli/webpack 配置将你的 Vue 组件编译成包,但是一旦你有了这个构建管道,这些包就可以通过 django-webpack-loader 在单独的 Django 模板中使用。信息可以通过模板变量直接作为 Vue 组件属性从 Django 传递。

重新捆绑,是的,您可以使用这种方法将所有这些资源捆绑到一个 JS 中,但是创建一个或多个代表共享逻辑(第三方库、独立组件,甚至 Vue本身),然后根据需要在各个 Django 模板上从这些包中挑选。

实现的步骤有点复杂,不能直接贴在这里,但我写了一系列文章Django + Vue -- Best of Both Frontends来解释。还有一个cookiecutter用于使用此方法引导新项目。我知道您已经有一个站点,但您也许可以在那里调整实施。


查看完整回答
反对 回复 2023-03-03
  • 1 回答
  • 0 关注
  • 42 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信