Skip to main content
Version: 下个版本

使用 NutUI 京东风格组件库

注意:NutUI 目前必须使用 taro 3.x 版本 + vue3 技术栈 进行开发。

为了给开发者提供更高效便捷的开发方式,Taro 和 NutUI 合力,现已可以用 NutUI 开发小程序了,NutUI 提供了30+ 组件涵盖了日常业务开发使用的大部分组件。

Taro3 支持使用 NutUI 组件库进行开发,示例仓库:taro3-nutui

预览体验

NutUINutUI

如何使用

安装

  • 通过 Npm 或 Yarn 安装

安装 Taro 脚手架

# 使用 npm 安装 CLI
npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
yarn global add @tarojs/cli

# OR 安装了 cnpm,使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli

值得一提的是,如果安装过程出现sass相关的安装错误,请在安装 mirror-config-china 后重试。

npm install -g mirror-config-china

检查是否安装成功

taro -v

项目初始化

使用命令创建模板:

taro init myApp

按照下方图片依次选择,选择 Vue3 + NutUI 模板

NPM 使用示例

注意:这种方式将会导入所有组件,打包文件大小会很大

import { createApp } from "vue";
import App from "./App.vue";
import NutUI from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(NutUI);

推荐使用按需加载

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 语句自动转换为按需引入的方式。

安装插件
npm install babel-plugin-import --save-dev

.babelrcbabel.config.js 中添加配置:

{
// ...
plugins: [
[
"import",
{
"libraryName": "@nutui/nutui",
"libraryDirectory": "dist/packages/_es",
"camel2DashComponentName": false
},
'nutui3-vue'
],
[
"import",
{
"libraryName": "@nutui/nutui-taro",
"libraryDirectory": "dist/packages/_es",
"camel2DashComponentName": false
},
'nutui3-taro'
]
]
}
import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(Button).use(Cell).use(Icon);

定制化主题使用

首先需要在 app.ts 文件中配置 使用 scss 样式文件如:

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
// 定制化主题必须使用 scss
import '@nutui/nutui-taro/dist/styles/themes/default.scss';
createApp(App).use(Button).use(Cell).use(Icon);

创建定制化主题样式文件 assets/styles/custom_theme.scss ,样式变量覆盖表参考 nutui variables

$primary-color: #478EF2;
$primary-color-end: #496AF2;

然后需要在 config/index.js 文件中配置 scss 文件全局覆盖如:

const path = require('path');
const config = {
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
375: 2 / 1
},
sass: {
resource: [
path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss')
]
},
// ...

vue 文件中使用查看效果

<template>
<view>
<nut-button type="primary" >nutui</nut-button>
</view>
</template>