在单页 vuejs 中使用组件答案

【问题标题】：use component in a single page vuejs在单页 vuejs 中使用组件
【发布时间】：2021-05-18 14:28:57
【问题描述】：

我在html页面中使用vuejs 3.0进行绑定，非常有用。我知道几乎开发人员使用应用程序，而不是这种方式，但我需要了解，应该有一种方法可以在创建项目的页面中加载组件（插件）。可能是类似Vue.createApp(app).component('b-pagination-nav', BPaginationNav).mount('#app')的命令

我尝试使用https://bootstrap-vue.org/docs/components/pagination-nav 为表格添加分页，但我失败了。如果可能的话，有人可以说我吗？


<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
   <table>
       <tr v-for="item in row ">
           <td>{{item}}</td>
       </tr>
   </table>
</div>


<script src="node_modules/vue/dist/vue.global.js"></script>
<script>
   const app = {
       data() {
           return { rows: ["fr","us","sp","it","pt"] }
       },
       methods: {
       },
   }
   Vue.createApp(app).mount('#app')
</script>
</body>
</html>

【问题讨论】：

你在尝试使用未编译的 vue 项目吗？

标签： vuejs3

【解决方案1】：

我不能自信地说我理解您的要求，但我假设您正在尝试将 Vue 与未编译的组件一起使用。

您可以使用 CDN 链接 vue.global.js。 <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script>。您也可以在本地链接它，但您可能会在本地遇到错误，因为您的路径包含 node_modules 文件夹，该文件夹可能不会与您的其余资产一起提供，因此您可以将 vue 库复制到您的 public 或dist 目录（或任何你用来服务的目录）

你也有问题<tr v-for="item in row">，应该是rows而不是row

示例：

<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
   <table>
       <tr v-for="item in rows">
           <td>{{item}}</td>
       </tr>
   </table>
</div>

<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script>
<script>
   const app = {
       data() {
           return { rows: ["fr","us","sp","it","pt"] }
       },
       methods: {
       },
   }
   Vue.createApp(app).mount('#app')
</script>
</body>
</html>

【讨论】：

谢谢 Daniel，使用 CDN 发布代码，我们有很好的基础来寻找解决方案。你在我的需要上写了一些话，解决方案的开始：使用没有 webpack 的组件。所以我在网上搜索并找到了这个解释（代码和 git 链接），它可以满足我的需要吗？有人可以根据我的要求调整解释吗，我没有足够的 vuejs 经验来做到这一点。 markus.oberlehner.net/blog/…