论坛 › 脚本开发 › Vue组件开发

Hangover 发表于 2022-4-8 14:53:52

Vue组件开发

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

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

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

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

> 接下来开始组件的开发

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

在js文件中编写组件代码（方便展示写在一起，编写多个组件可以创建单独js文件编写）：
```javascript
// 按钮组件
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 =

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

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

回到HTML文件中，使用use安装组件并引入package文件夹中js与css文件
```javascript
app.use(MyPlugin);
```

在app中放置组件:
```html
<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文件中右键点击!(data/attachment/forum/202204/08/144052n5j5c38jwum458m5.png)

最终呈现的效果：

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

查看完整版本: Vue组件开发