# 安装

# 环境要求

Vue 2.6.0+
Node.js 12+

# npm 安装

推荐使用 npm 的方式进行开发，享受 node 模块生态圈和 webpack 工具链带来的便利。

npm install @weitutech/by-components

# CDN 引入

目前可以通过 unpkg.com/@ weitutech/by-components 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/@weitutech/by-components/lib/index.css" />
<!-- 引入组件库 -->
<script src="https://unpkg.com/@weitutech/by-components/lib/by-components.umd.js"></script>

TIP

我们建议使用 CDN 引入 By Components 的用户在链接地址上锁定版本，以免将来 By Components 升级时受到非兼容性更新的影响。

# Hello World

通过 CDN 的方式我们可以很容易地使用 By Components 写出一个 Hello world 页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@weitutech/by-components/lib/index.css" />
  </head>
  <body>
    <div id="app">
      <by-table :columns="columns" :data="tableData"></by-table>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/@weitutech/by-components/lib/by-components.umd.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function () {
        return {
          columns: [
            { label: '姓名', prop: 'name' },
            { label: '年龄', prop: 'age' }
          ],
          tableData: [
            { name: '张三', age: 18 },
            { name: '李四', age: 20 }
          ]
        }
      }
    })
  </script>
</html>

← 介绍快速上手 →