VUE3中使用fancy-components

一、什么是fancy-components？

fancy-components 是一个使用web components开发的酷炫的前端组件库

二、如何使用？

1、安装组件库

yarn add fancy-components

2、main.ts或者main.js中全局引入

import { FcArrowBtn, FcBubbles, FcPixelBtn } from 'fancy-components'

new FcBubbles() //要用哪个就new哪个

3、界面中使用，使用短横杠连接

<fc-pixel-btn>FcPixelBtn</fc-pixel-btn>

4、eslintrc.js中处理报错

module.exports = {
  rules: {
    'no-new': 'off'
  }
}

5、普通HTML中使用

<body>
    <fc-input placeholder="usermane"></fc-input>
</body>
<script type="module">
import { FcTypingInput } from 'https://unpkg.com/fancy-components'  
new FcTypingInput('fc-input')
</script>
posted @ 2022-05-25 18:11  清和时光  阅读(346)  评论(0)  编辑  收藏  举报