导入basicUI主题介绍

什么是basicUI?

basicUI是一个基于Vue.js的开源UI框架，它包含了一系列常用的UI组件，例如按钮、表单、卡片、模态框等，以及一些实用的工具函数和CSS样式。

为什么选择basicUI?

1. 简单易用：basicUI的组件非常简单易用，适合于快速搭建界面，让开发者更专注于业务逻辑的开发。

2. 响应式设计：basicUI的组件具有响应式设计，可以在不同屏幕尺寸下自适应展示，让你的应用在各种设备上都能获得良好的用户体验。

3. 丰富的主题：basicUI提供了多种主题可供选择，让你的应用有更多的可能性。

如何导入basicUI?

1. 安装：使用npm安装basicUI。

   npm install basicui --save
   

2. 引入样式：在你的项目中，导入basicUI的CSS样式文件。

   <link rel="stylesheet" href="node_modules/basicui/dist/basicui.min.css">
   

3. 引入组件：在你的Vue组件中引入需要的basicUI组件。

   import { Button, Input } from 'basicui';
   
   export default {
     components: { Button, Input }
   };
   

使用示例

下面是一个简单的示例，使用了basicUI的Button和Input组件。

<template>
  <div>
    <h1>登录</h1>
    <form>
      <input type="text" placeholder="用户名" v-model="username">
      <input type="password" placeholder="密码" v-model="password">
      <button @click="login">登录</button>
    </form>
  </div>
</template>

<script>
import { Button, Input } from 'basicui';

export default {
  components: { Button, Input },
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 执行登录逻辑
    },
  },
};
</script>