Vue组件开发

Hangover

Vue的组件开发可以通过本地构建Vue项目，或者通过CDN引入Vue的JS文件，再进行组件开发

作为学习不到一年的小白，当然是有多简单就整多简单了~

1. 在vscode中新建一个HTML文件
2. 使用script标签引入Vue3的JS文件
3. 创建一个id为app的div标签
4. 将Vue实例挂载到app，如下

const app = Vue.createApp({});
      app.mount("#app");

接下来开始组件的开发

1. 在同目录下新建package文件夹，用来存放组件（文件夹名可随意改）
2. 在package文件夹中新建一个js文件与css文件

在js文件中编写组件代码（方便展示写在一起，编写多个组件可以创建单独js文件编写）：

// 按钮组件
const ZsButton = {
    name: "zs-button", // 自定义name组件名称
    props: {
        type: { // 校验类型并指定默认值
            type: String,
            default: "default",
        }
    },
    template: `
    <button :class="['zs-button', 'zs-button--' + type]">
        <span>
            <slot></slot>
        </span>
    </button>`
}

// 开关组件
const ZsSwitch = {
    name: 'zs-switch',
    props: {
        type: {
            type: String,
            default: "default",
        }
    },
    template: `
    <label :class="['zs-switch', 'zs-switch--' + type]">
        <input type="checkbox">
        <span class="slider"></span>
    </label>`
}

const coms = [ZsButton, ZsSwitch]

const MyPlugin = {
    install(app) { // install方法在使用时可以通过use安装
        coms.forEach((com) => {
            app.component(com.name, com) // 注册组件
        })
    }
}

css文件中编写组件样式，这里省略~

回到HTML文件中，使用use安装组件并引入package文件夹中js与css文件

app.use(MyPlugin);

在app中放置组件:

<div id="app">

        // 按钮写（抄）了三个样式，type默认为 default
        <zs-button>按钮 1</zs-button>
        <zs-button type="mimicry">按钮 2</zs-button>
        <zs-button type="beautiful">按钮 3</zs-button>

        // 开关
        <zs-switch></zs-switch>

</div>

验证组件是否可用：

在vscode中可以安装 Live Server 扩展，然后在HTML文件中右键点击

最终呈现的效果：

PS：想要在油猴脚本中使用组件，需要将编写的js与css文件发布到npm再引入使用~