v-plugs-ayu
一个基于vue.js的组件库 (A Component Library Based on vue.js)
安装
npm
npm i v-plugs-ayu -S在man.js中引入即可开始使用
import ayu from 'v-plugs-ayu'
import 'v-plugs-ayu/lib/ayu.css'
Vue.use(ayu)CDN
在页面上引入 css和js 文件即可开始使用
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-plugs-ayu/lib/ayu.css">
<!-- 引入js -->
<script src="https://cdn.jsdelivr.net/npm/v-plugs-ayu/lib/ayu.umd.min.js"></script>建议使用 CDN 引入 Ayu 的用户在链接地址上锁定版本
组件和文档正在编写和完善中，感谢您的关注和支持，谢谢。
Hello world
通过 CDN 的方式我们可以很容易地使用 Ayu 写出一个 Hello world 页面,新建一个html页面,复制以下内容即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ayu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-plugs-ayu/lib/ayu.css">
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<ayu-button type="primary" @click="open()">点击我</ayu-button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/v-plugs-ayu/lib/ayu.umd.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
open() {
this.$alert({
title: '我是标题',
content: '我是内容',
onConfirm: () => {
alert('你点了确定哦');
}
})
}
},
created() {}
})
</script>
</body>
</html>