# vue快速上手

# 使用前准备

在使用之前，推荐学习Vue和ES2015，并正确配置Node.jsv6.x 或以上版本

基于Vue.js2.x+ 版本开发，所以有必要了解以下基础知识：

# 标准开发

实际项目中，往往会使用webpack，rollup或者gulp的工作流，大多可以做到按需加载页面用到的组件，所以不推荐直接使用<script>标签全局引入的方式使用。

# 全局组件使用

可以在项目的入口文件中引入所有组件或所需组件

import Cap4Business from 'cap4-business' // 引入组件库
import '../node_modules/Cap4Business/lib/index.css' // 引入样式库

Vue.use(Cap4Business)

# 单个组件按需使用，解构方式（会导致打包过大，推荐使用单引用）

可以局部注册所需的组件，适用于与其他框架组合使用的场景

import { Cap4Button } from 'cap4-business'

export default {
  components: {
    Cap4Button
  }
}

# 单个组件按需使用，单引用

可以局部注册所需的组件，适用于与其他框架组合使用的场景

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>自定义标签的方式使用组件

<template>
  <div>
    <cap4-button>这是一个按钮</cap4-button>
  </div>
</template>

创建人：yinyanting

快速跳转

vue快速上手
- 使用前准备
- 标准开发

← 数据魔方 1. 总体原则 →