salcor v0.1.6

快速上手

使用前准备

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

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

• Vue 组件
• 单文件组件

标准开发

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

全局组件使用

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

import { createApp } from 'vue'
import Salcor from 'salcor'
import 'salcor/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(Salcor)
app.mount('#app')

单个组件按需使用

可以局部注册所需的组件，适用于与其他框架组合使用的场景。首先我们需要借助 babel-plugin-import 插件以达到减小项目体积的目的。

npm install babel-plugin-component

然后修改 .babelrc 配置：

{
  "presets": ["es2015", "stage-2"],
  "plugins": [["import", {
    "libraryName": "at",
    "libraryDirectory": "src/components"
  }]]
}

接下来引入你需要用的组件

import { ScButton } from 'at-ui'

app.use(ScButton)

在模板中，用 <sc-button></sc-button> 自定义标签的方式使用组件。

<template>
  <div>
    <sc-button>默认按钮</sc-button>
  </div>
</template>