快速上手
本节将介绍如何在项目中使用 vue-wheels-bowen。
引入 vue-wheels-bowen
你可以引入整个 vue-wheels-bowen,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 vue-wheels-bowen。
完整引入
在 main.js 中写入如下内容:
import Vue from 'vue';
import VueWheelsUI from 'vue-wheels-bowen';
import 'vue-wheels-bowen/dist/index.css';
import App from './App.vue';
Vue.use(VueWheelsUI);
new Vue({
el: '#app',
render: h => h(App)
});
以上代码便完成了 vue-wheels-bowen 的引入。需要注意的是,样式文件需要单独引入。
按需引入
如果你只希望引入部分组件,比如 Button 和 Icon,那么需要在 main.js 中写入以下内容: // TODO: 本章节尚待完善
import Vue from 'vue';
import {Button, ButtonGroup, Icon} from 'vue-wheels-bowen';
import 'vue-wheels-bowen/dist/index.css';
import App from './App.vue';
export default {
name: 'app',
components: {
HelloWorld,
'g-button': Button,
'g-button-group': ButtonGroup,
'g-icon': Icon,
}
}
全局配置
// TODO: 本章节尚待完善
开始使用
至此,一个基于 Vue 和 vue-wheels-bowen 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。