最近使用Taro 开发小程序的时候 发现react版本对应的taro-ui竟然好久都没有更新了 奇怪了。 要是后期碰见什么坑 都没人来管了 .
我看见有个网友留言。taro开发的人员把人力都投入到了 Nutui里面了.

后来我就去瞅了瞅这个nutui ui框架 感觉 很不错,也有人在不停的维护,这个才是我最想要的情况

说句实话呢。如果是跨平台的开发的话 taro 的普及率 并没有uniapp大.
毕竟uniapp是背靠vue这座大山,国内前端开发 vue开发也占据了四分之三的情况

我想这个也是为啥 在Taro3.*版本 竟然也是支持vue开发 现在还支持vue3.
也有vue3对应的ui组件库.真的不错.

我在用react搭建好了开发环境后 毅然决然 放弃了react 转成了 vue3 + nutui + pinia 开发
用了一天之后 感觉还不错,虽然也踩了一些坑 但总体还是可以

好了闲话就不多说了,开始进入主体

1. 博主的是 Taro3.4版本
   如果没有的话安装 taro的脚手架

npm install -g @tarojs/cli
1

然后就是taro init myApp 项目名字 这里我并没有采用模版的方式安装
因为我要用到pinia

2. 安装依赖

yarn add @nutui/nutui-taro --save
1

但是安装完成之后 需要你按需引入这里就需要配置下了

yarn add babel-plugin-import --save-dev
1

然后在babel.config.js or .babelrc

plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui-taro",
        "libraryDirectory": "dist/packages/_es",
        // customName自定义兼容国际化使用
        "customName": (name, file) => {
          if (name == 'Locale') {
            return '@nutui/nutui-taro/dist/packages/locale/lang';
          } else {
            return `@nutui/nutui-taro/dist/packages/_es/${name}`;
          }
        },
        "style": (name, file) => name.toLowerCase().replace('_es/', '') + '/index.scss',
        "camel2DashComponentName": false
      },
      'nutui3-taro'
    ]
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

再安装一个插件

yarn add @tarojs/plugin-html --save-dev
1

在config/index.js中

 plugins: ["taro-plugin-pinia", "@tarojs/plugin-html"],
1

同时还要配置下 sass变量文件
config/index.js

 sass: {
    data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
  },
1
2
3

3 然后就是引入使用

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import './app.scss'
import { Button, Cell, Icon, Avatar,  Tabs, TabPane, Sticky, Drag } from "@nutui/nutui-taro";

const nutuiList = [
  Button,
  Cell,
  Avatar,
  Icon,
  Tabs,
  TabPane,
  Sticky,
  Drag
]
const App = createApp({
  onShow(options) {
  },
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})

App.use(createPinia())
nutuiList.forEach(item => {
  App.use(item)
})

export default App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

说在这个框架好处的一点就是。h5和小程序都可以用 一套代码两端适用

<template>
  <view class="detail">
    <nut-button type="primary">主要按钮</nut-button>
    <nut-button type="info">信息按钮</nut-button>
    <nut-button type="default">默认按钮</nut-button>
    <nut-button type="danger">危险按钮</nut-button>
    <nut-button type="warning">警告按钮</nut-button>
    <nut-button type="success">成功按钮</nut-button>
  </view>
</template>

<script>
import "./index.scss";
export default {
  name: "Index",
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

就是正常引入使用了
因为上午 我尝试手动安装的时候碰见了小坑 所以这里又来做下记录,
注意: 这里仅仅是给手动安装的nutui的同学一个指导步骤,如果直接使用模板应该没有那么多事情呢

关注我 持续更新前端知识

如果不想在这个技术的世界中后退的话,就只能迎难而上了,不能碰见挫折就后退,向上吧少年,

关注我。持续更新前端知识。