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

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

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

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

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

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

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

npm install -g @tarojs/cli

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

安装依赖

yarn add @nutui/nutui-taro --save

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

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

然后在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'
    ]
  ]

再安装一个插件

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

在config/index.js中

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

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

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

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

说在这个框架好处的一点就是。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>

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

关注我持续更新前端知识

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

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

Taro vue3版本安装使用 NutUi 手动安装

3 然后就是引入使用

猜你喜欢