kye-taro-ui

    1.0.100 • Public • Published

    使用前准备

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

    如何使用

    1. 安装 Taro 脚手架工具

    安装 Taro 开发工具 @tarojs/cli

    使用 npm 或者 yarn 全局安装,或者直接使用 npx

    $ npm install -g @tarojs/cli
    $ yarn global add @tarojs/cli
    

    2. 初始化项目

    使用命令创建模板项目

    $ taro init myApp
    

    3. 安装 kye-taro-ui

    $ cd myApp
    $ npm i kye-taro-ui
    

    4. 使用 kye-taro-ui

    引入所需组件

    在代码中 import 需要的组件并按照文档说明使用 // page.js import { KyeButton } from 'kye-taro-ui' // 除了引入所需的组件,还需要手动引入组件样式 // app.js import 'kye-taro-ui/assets/scss/combination.scss' // 全局引入一次即可

    引入组件样式的三种方式

    • 全局引入(JS中): 在入口文件中引入 kye-taro-ui 所有的样式 import 'kye-taro-ui/assets/scss/combination.scss' // 引入组件样式 - 方式一

    • 全局引入(CSS中): 在 app.scss 样式文件中 import 组件样式并按照文档说明使用 @import "~kye-taro-ui/assets/scss/combination.scss"; // 引入组件样式 - 方式二

    • 按需引入: 在页面样式或全局样式中 import 需要的组件样式 @import "~kye-taro-ui/dist/style/components/button.scss"; // 引入所需的组件样式 - 方式三

    示例

    /myApp/src/pages/index/index.tsx 文件添加以下代码

    import Taro, { Component, Config } from '@tarojs/taro'
    import { View } from '@tarojs/components'
    import { KyeButton } from 'kye-taro-ui'
    import './index.scss'
    export default class Index extends Component {
        config: Config = {
            navigationBarTitleText: '首页'
        }
    
        render () {
            return (
            <View className='index'>
                <KyeButton type='primary'>按钮文案</KyeButton>
            </View>
            )
        }
    }
    
    /myApp/src/app.scss 文件中添加如下代码
    @import "~kye-taro-ui/assets/scss/combination.scss"; // 引入组件样式,仅需引入一次即可
    

    编译并预览

    进入项目目录开始开发,可以选择小程序预览模式,或者 h5 预览模式,若使用小程序预览模式,则需要自行下载并打开对应的小程序开发者工具,并选择预览项目根目录。

    微信小程序编译预览模式
    # npm script
    $ npm run dev:weapp
    # 仅限全局安装
    $ taro build --type weapp --watch
    # npx用户也可以使用
    $ npx taro build --type weapp --watch
    
    支付宝小程序编译预览模式
    # npm script
    $ npm run dev:alipay
    # 仅限全局安装
    $ taro build --type alipay --watch
    # npx 用户也可以使用
    $ npx taro build --type alipay --watch
    
    百度小程序编译预览模式
    # npm script
    $ npm run dev:swan
    # 仅限全局安装
    $ taro build --type swan --watch
    # npx 用户也可以使用
    $ npx taro build --type swan --watch
    
    H5 编译预览模式
    # npm script
    $ npm run dev:h5
    # 仅限全局安装
    $ taro build --type h5 --watch
    # npx 用户也可以使用
    $ npx taro build --type h5 --watch
    

    Keywords

    none

    Install

    npm i kye-taro-ui

    DownloadsWeekly Downloads

    99

    Version

    1.0.100

    License

    ISC

    Unpacked Size

    120 kB

    Total Files

    43

    Last publish

    Collaborators

    • avatar