# vue快速上手 * * * ## 使用前准备 > 在使用之前，推荐学习`Vue`和`ES2015`，并正确配置`Node.js`v6.x 或以上版本 基于`Vue.js`2.x+ 版本开发，所以有必要了解以下基础知识： * [Vue 组件](https://cn.vuejs.org/v2/guide/components.html) * [单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html) ## 标准开发 实际项目中，往往会使用`webpack`，`rollup`或者`gulp`的工作流，大多可以做到按需加载页面用到的组件，所以不推荐直接使用`<script>`标签全局引入的方式使用。 ### 全局组件使用 可以在项目的入口文件中引入所有组件或所需组件 ~~~js import Cap4Business from 'cap4-business' // 引入组件库 import '../node_modules/Cap4Business/lib/index.css' // 引入样式库 Vue.use(Cap4Business) ~~~ ### 单个组件按需使用，解构方式（会导致打包过大，推荐使用单引用） 可以局部注册所需的组件，适用于与其他框架组合使用的场景 ~~~js import { Cap4Button } from 'cap4-business' export default { components: { Cap4Button } } ~~~ ### 单个组件按需使用，单引用 可以局部注册所需的组件，适用于与其他框架组合使用的场景 ~~~js import Cap4StatisticsPcTable from 'cap4-business/lib/cap4-statistics-pc-table'; import 'cap4-business/lib/cap4-statistics-pc-table/css/cap4-statistics-pc-table.css'; export default{ components : {Cap4StatisticsPcTable} } ~~~ 在模板中，用`<cap4-button></cap4-button>`自定义标签的方式使用组件 ~~~html <template> <div> <cap4-button>这是一个按钮</cap4-button> </div> </template> ~~~