Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

A Rollup from 0 to 1 overhand front-end component library development | VUE components used

The above review

  • Rollup from 0 to 1 to fit the front-end component library development | started
  • A Rollup from 0 to 1 overhand front-end component library development | module builds
  • A Rollup from 0 to 1 overhand front-end component library development | tree – shaking mechanism
  • A Rollup from 0 to 1 overhand front-end component library development | external properties
  • A Rollup from 0 to 1 overhand front-end component library development | CJS plug-in
  • Rollup from 0 to 1 to fit the front-end component library development | common plug-in
  • A Rollup from 0 to 1 overhand front-end component library development | VUE component compilation

Now that we have completed the vue3 component parsing by Rollup, we need to explore how to use our vue component in HTML

Initial experience of VUE components

Ready to file

Create the /example/index.html file

Vue3 framework is introduced

First, let’s find the component library resource address ~ of VUe3.0

Access resources vue website address https://cdn.jsdelivr.net/npm/vue@next/dist/

Switch to the latest version [email protected]

Select the vue. Global. Js

Get the address cdn.jsdelivr.net/npm/[email protected]…

Copy to script

Write HTML code using VUE

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component library testing</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Copy the code

! [image – 20210927203722624] (08 rollup from 0 to 1 overhand front-end component library development | 08. Assets/image – 20210927203722624. The PNG)

So far we have verified the successful introduction of the VUE framework

Using our own component ~

Call our component with.use()

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component library testing</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Copy the code

Viewing the Running result

Running successfully ~!

Validate computed properties

  • Modify the Test. The 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>

Copy the code

Compile and view the results

Verification successful ~!

Add event

Verification successful ~