小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Rollup从0到1上手前端组件库开发 | VUE组件使用

上文回顾

通过上文的讲解, 我们目前已经完成了 rollup 对 vue3 组件的解析, 接下来, 我们要研究如何在HTML中使用我们开的的 vue 组件

vue 组件初体验

准备文件

创建 /example/index.html 文件

引入vue3框架

首先,我们先找到 vue3.0的组件库资源地址~

访问 vue 官网提供的资源地址 https://cdn.jsdelivr.net/npm/vue@next/dist/

切换到最新的版本 vue@3.2.19

选择 vue.global.js

获得地址 cdn.jsdelivr.net/npm/vue@3.2…

拷贝到 script 中

编写 html 使用 vue 的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件库测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.19/dist/vue.global.js"></script>
    <script src="../dist/payfun.rollbear.dev.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
    Vue.createApp({
        setup() {
            var message = "hello rollup"
            return {
                message
            }
        }
    }).mount("#app")
</script>
</body>
</html>

![image-20210927203722624](08Rollup从0到1上手前端组件库开发 | 08 .assets/image-20210927203722624.png)

到这里我们已经验证了 vue 框架引入成功~

使用我们自己编写的组件~

使用.use() 调用我们的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件库测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.19/dist/vue.global.js"></script>
    <script src="../dist/payfun.rollbear.dev.js"></script>
</head>
<body>
<div id="app">
    {{message2}}
    <test-component></test-component>
</div>
<script>
    Vue.createApp({
        setup() {
            var message2 = "hello rollup"
            return {
                message2
            }
        }
    }).use(window.payfunRollbear).mount("#app")
</script>
</body>
</html>

查看运行结果

运行成功~!

验证计算属性

修改Test.vue

<template>
  <div class="test">
    <div>message: {{ message }}</div>
    <div>doubleCount: {{ doubleCount }}</div>
  </div>
</template>

<script>
import {computed, ref} from 'vue'

export default {
  name: "TestComponent",
  setup() {
    const message = '[TestComponent]: hello rollup'
    const count = ref(1)
    const doubleCount = computed(() => count.value * 2)
    return {
      message,
      doubleCount
    }
  }
}
</script>
<style scoped lang="scss">
.test {
  color: blue;
}
</style>

编译后查看结果

验证成功~!

增加事件

2021-09-27 20.59.52.gif

验证成功~