vue.js ui组件库_使用Vue.js构建的游戏《守望先锋》的UI库

vue.js ui组件库

守望先锋 (overwatch-ui)

A UI library of game Overwatch, built with Vue.js.

使用Vue.js构建的游戏《守望先锋》的UI库。

View Demo 查看演示 View Documentation 查看文档

安装 (Install)

$ yarn install overwatch-ui

or

$ npm install overwatch-ui --save

进口 (Import)

Then you need to import its components and plugins in main.js.

然后，您需要在main.js中导入其组件和插件。

// main.js
// Import the library
import OwUI from 'overwatch-ui'
import 'overwatch-ui/dist/overwatch-ui.css'

// Use some plugins
Vue.use(OwUI.plugins.$owAlert)

// Register components that you need in the root component
new Vue({
    components: {
        ...OwUI.Components
    },
    router,
    render: h => h(App)
}).$mount('#app')

用法 (Usage)

Now, let's place some components in your Web APP!

现在，让我们在Web APP中放置一些组件！

<ow-button type="info">Info</ow-button>
<ow-button type="primary">Primary</ow-button>
<ow-button type="success">Success</ow-button>
<ow-button type="warning">Warning</ow-button>
<ow-button type="danger">Danger</ow-button>

<ow-popover position="top">
    <template slot="content">
        <div>Hello, Overwatch UI!</div>
    </template>
    <ow-button>Pop It!</ow-button>
</ow-popover>

注意 (Note)

This UI library will reset some styles as followed.
I strongly recommend you to add these styles to all of your projects for saving time to find CSS bugs :)

该UI库将按照以下方式重置一些样式。
我强烈建议您将这些样式添加到所有项目中，以节省查找CSS错误的时间：)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

翻译自: https://vuejsexamples.com/a-ui-library-of-game-overwatch-built-with-vue-js/

vue.js ui组件库