使用 NutUI 京东风格组件库 | Taro 文档

使用 NutUI 京东风格组件库

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

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

Taro3 支持使用 NutUI 组件库进行开发，示例仓库：taro3-nutui。

预览体验​

NutUINutUI

如何使用​

安装​

  • 通过 Npm 或 Yarn 安装

安装 Taro 脚手架​

# 使用 npm 安装 CLInpm install -g @tarojs/cli# OR 使用 yarn 安装 CLIyarn global add @tarojs/cli# OR 安装了 cnpm，使用 cnpm 安装 CLIcnpm 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

在 .babelrc 或 babel.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";// 定制化主题必须使用 scssimport '@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>

原网址: 访问
创建于: 2022-07-06 12:14:20
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论