Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
242 lines (203 sloc) 7.23 KB
title order sidebar
快速开始
0
doc

准备工作

在学习使用kpc之前,假设你已经掌握了以下知识:

  1. webpack + babel
  2. Vue(如果将kpc用于Vue项目)或者intact(如果将kpc用于Intact项目)或者React(如果将kpc用于React项目)

手动引入

安装

npm install kpc -S

单文件构建版

如果你的项目没有使用webpack来构建,可以引入单文件构建版。将kpc.csskpc.js在html文件中引入。 此时所有组件都在Kpc命名空间下,例如Kpc.Button Kpc.Table等。

另外你也可以调用Kpc.install()方法将组件放到全局空间下,此时为了避免命名冲突, 所有组件名前加上K作为前缀,例如KButton KTable

CDN

通过cdn.jsdelivr.net/npm/kpc/dist/可以直接引入最新版kpc,建议使用锁定版本地址, 例如:cdn.jsdelivr.net/npm/kpc@0.5.14/dist/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>kpc-demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/kpc/dist/kpc.css" />
    <!-- 将上述kpc.css替换成ksyun.css,可以使用ksyun主题 -->
    <!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/kpc/dist/ksyun.css" /> -->
</head>
<body>
    <div id="app"></div>

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/intact/dist/intact.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/kpc/dist/kpc.min.js"></script>
    <script type="text/javascript">
        Kpc.install();
        var Page = Intact.extend({
            template: '<KButton ev-click={self.hello}>Hello World</KButton>',
            hello: function() {
                KMessage.success('Welcome to kpc world!');
            }
        });
        Intact.mount(Page, document.getElementById('app'));
    </script>
</body>
</html>

多文件css构建版

当项目使用webpack构建时,可以使用kpc的多文件css构建版,此时可以做到按需加载,而非单文件全量引入。 多文件构建版样式css和字体,需要通过css-loader & style-loaderfile-loader来引入

此版本放在@css文件夹下,该文件名的意思是:所有的样式stylus文件都被编译成了css文件,并非只是 放置css文件的目录。 ES6语法的jsvdt文件也都被编译成了ES5语法的js文件,所以你无需babel-loadervdt-loader 来处理它们,仅仅只需css-loaderstyle-loader处理css文件即可。另外file-loader处理字体 还是需要的。

  1. 安装依赖
npm install kpc --save

npm install css-loader style-loader file-loader --save-dev
  1. 配置webpack.config.js

为了统一组件加载路径,我们可以加入alias设置。例如:kpc/components/button会指向 kpc/@css/components/button

module.exports = {
    ...
    resolve: {
        alias: {
            // 让kpc组件指向多文件构建版本,可以统一组件加载路径
            'kpc': 'kpc/@css'
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            url: true
                        }
                    }
                ]
            },
            // 引入字体文件
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts/',
                        }
                    }
                ]
            },
        ]
    }
}
  1. 按需引入组件

在需要使用组件的地方,引入组件

import {Button, ButtonGroup} from 'kpc/components/button';

<ButtonGroup>
    <Button>button1</Button>
    <Button>button2</Button>
</ButtonGroup>

多文件stylus构建版

所谓stylus构建版与css构建版的区别是,样式使用的stylus而非编译后的css。当我们需要修改或者引入新主题时, 通过该版本,可以很方便地实现。详见定制主题

由于使用stylus,所以与构建版在使用上唯一的区别是需要引入stylus-loader

与多文件css构建版类似,此版本放在@stylus目录下

  1. 新增依赖

为了提供css兼容性,这里加入autoprefixer

npm install postcss-loader autoprefixer stylus-loader --save-dev
  1. 修改webpack.config.js

将css加载配置修改为(通过stylus-loaderimport配置,我们可以引入主题文件):

const autoprefixer = require('autoprefixer');

module.export = {
    ...
    resolve: {
        alias: {
            'kpc': 'kpc/@stylus'
        }
    },
    module: {
        rules: [
            ...
            // 编译stylus
            {
                test: /\.(styl|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader', 
                        options: {
                            url: true,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer({
                                    browsers: [
                                        'last 2 versions',
                                        'ie >= 9',
                                    ],
                                })
                            ],
                        }
                    },
                    {
                        loader: 'stylus-loader', 
                        options: {
                            'include css': true,
                            'resolve url': true, // @since v0.6.0
                            sourceMap: false,
                            // 使用import引入主题文件,详见定制主题
                            // 'import': path.resolve(__dirname, 'styles/themes/ksyun/index.styl'),
                        }
                    }
                ]
            },
            // 引入字体文件
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts/',
                        }
                    }
                ]
            },
        ]
    }
}
You can’t perform that action at this time.