# 快速上手

# npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i webuy-ui -S

# 引入 Webuy-ui

你可以引入整个 WebuyUI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 WebuyUI。

# 完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import WebuyUI from 'webuy-ui';
import App from './App.vue';

Vue.use(WebuyUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 WebuyUI 的引入。

# 按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "styleLibrary": {
          "name": "theme",
          "base": false
        }
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Popup main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Popup } from 'webuy-ui';
import App from './App.vue';

Vue.use(Button)
Vue.use(Popup)

new Vue({
  el: '#app',
  render: h => h(App)
});

完整组件列表和引入方式

import Vue from 'vue';
import {
  ActionSheet,
  AwesomeDots,
  BackTop,
  Button,
  Checkbox,
  CheckboxGroup,
  DatePicker,
  Image,
  ImagePicker,
  Indicator,
  Input,
  InputGroup,
  List,
  Loading,
  MessageBox,
  Picker,
  Popup,
  PreviewImage,
  Price,
  PullDownRefresh,
  Sku,
  Stepper,
  Swiper,
  SwiperItem,
  Tab,
  Tabs,
  TimeTip,
  Toast,
} from 'webuy-ui';

Vue.use(ActionSheet);
Vue.use(AwesomeDots);
Vue.use(BackTop);
Vue.use(Button);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(DatePicker);
Vue.use(Image);
Vue.use(ImagePicker);
Vue.use(Indicator);
Vue.use(Input);
Vue.use(InputGroup);
Vue.use(List);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(Popup);
Vue.use(Price);
Vue.use(PullDownRefresh);
Vue.use(Sku);
Vue.use(Stepper);
Vue.use(Swiper);
Vue.use(SwiperItem);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(TimeTip);

Vue.prototype.$Toast = Toast;
Vue.prototype.$MessageBox = Message;
Vue.prototype.$PreviewImage = PreviewImage;