# 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> ~~~