vue3.0使用taro-ui-vue3引入組件不生效的問題及解決

更新時間：2024年03月15日 09:43:04 作者：紅噔噔

這篇文章主要介紹了vue3.0使用taro-ui-vue3引入組件不生效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

這兩天一直研究云閃付小程序，開始和同事好不容易用云閃付的官方ui研究了，但是害怕后期在多個平臺上線部署出現(xiàn)不兼容的問題，無奈只好另辟蹊徑，選擇taro來實現(xiàn)‘一處代碼，多處運行’，我們采用Vue3.0+TS+Sass+taro-ui-vue3，在安裝編譯一直出現(xiàn)問題，掉落我們幾根寶貴的頭發(fā)

這里把本次遇到的坑總結(jié)下：

第一步：確保已安裝全局的vue3環(huán)境，在安裝taro yarn global add @tarojs/cli

項目初始化

使用命令創(chuàng)建模板項目：

$ taro init myApp

我這里選擇的是Vue3

安裝完成后：

進(jìn)入項目根目錄

$ cd myApp

使用 yarn 安裝依賴

$ yarn

微信小程序編譯命令

$ yarn dev:weapp

重頭戲來了，引入taro-ui-vue3.0

安裝 Taro UI

yarn add taro-ui-vue3

解決：yarn add taro-ui@3.0.0-alpha.3

按照官方引入sass和組件，試了好久都是【object object】，

全局引入

1、在app.ts中配置：

import 'taro-ui-vue3/dist/style/index.scss'

2、在需要的組件中，引入，然后注冊使用

<template>
  <view class="index">
     <AtButton type='primary'>按鈕文案</AtButton>
  </view>
</template>

<script>
import './index.scss'
import { AtButton } from 'taro-ui-vue3'

export default {
  components:{
    AtButton
  }
}
</script>

可是得到的運行結(jié)果是這樣，審查了元素發(fā)現(xiàn)是【object object】

結(jié)果找了好久，發(fā)現(xiàn)引入組件里面有一個說明文檔，里面有詳細(xì)的說明

- H5 端

- 為了方便起見，使用 `taro-ui-vue3` 的項目編譯至 h5 時，暫時需要使用腳本先修改 `@tarojs/components/dist-h5/vue3/index.js`，將所有組件導(dǎo)出，方便按需引用。

- 然后通過 webpack 配置 `alias` 將 `@tarojs/components$` 指向 `@tarojs/components/dist-h5/vue3/index.js`。具體 h5 編譯配置方案如下：

- 在項目的 config 目錄下增加一個 h5 構(gòu)建腳本: [h5-building-script.js](./packages/demo/config/h5-building-script.js)

- 將 `package.json` 下的 `build:h5` 命令修改為：

`"build:h5": "node ./config/h5-building-script.js && taro build --type h5",`

- 在 `config/index.js` 中的 `h5` 下添加 webpack `alias` 設(shè)置：

```typescript
    h5: {
      webpackChain(chain) {
        chain.resolve.alias
          .set(
            '@tarojs/components$',
            '@tarojs/components/dist-h5/vue3/index.js'
          )
      }

}

按照文檔操作，進(jìn)行配置

1、在config里新增一個h5-building-script.js文件

const path = require('path')
const fs = require('fs')

const distH5Vue3IndexPath = path.resolve(__dirname, '../node_modules/@tarojs/components/dist-h5/vue3/index.js')
const distH5vue3IndexNew = `
// This file is generated by config/h5-building-script.js

import createComponent from './createComponent'
import { simpleComponents } from '../vue/simpleComponents'
import createFormsComponent from './createFormsComponent'
import Text from './components/text'
import Image from './components/image'
import Icon from './components/icon'
import ScrollView from './components/scroll-view'


function genSimpleComponents(components) {
  const componentMap = {}
  components.map(component => {
    if (typeof component === 'string') {
      componentMap[component] = createComponent(component)
    } else {
      const { name, classNames } = component
      componentMap[name] = createComponent(name, classNames)
    }
  })
  return componentMap
}

const componentMap = genSimpleComponents(simpleComponents)

// simple components
export const View = componentMap['taro-view']
export const RichText = componentMap['taro-rich-text']
export const Button = componentMap['taro-button']
export const CheckboxGroup = componentMap['taro-checkbox-group']
export const Editor = componentMap['taro-editor']
export const Form = componentMap['taro-form']
export const Label = componentMap['taro-label']
export const PickerView = componentMap['taro-picker-view']
export const PickerViewColumn = componentMap['taro-picker-view-column']
export const CoverImage = componentMap['taro-cover-image']
export const CoverView = componentMap['taro-cover-view']
export const MoveableArea = componentMap['taro-moveable-area']
export const MoveableView = componentMap['taro-moveable-view']
export const Swiper = componentMap['taro-swiper']
export const FunctionalPageNavigator = componentMap['taro-functional-page-navigator']
export const Navigator = componentMap['taro-navigator']
export const Audio = componentMap['taro-audio']
export const Camera = componentMap['taro-camera']
export const LivePlayer = componentMap['taro-live-player']
export const Map = componentMap['taro-map']
export const Ad = componentMap['taro-ad']
export const OfficialAccount = componentMap['taro-official-account']
export const OpenData = componentMap['taro-open-data']
export const WebView = componentMap['taro-web-view']
export const NavigationBar = componentMap['taro-navigation-bar']
export const Block = componentMap['taro-block']
export const Canvas = componentMap['taro-canvas']

// simple components with classNames
export const Checkbox = componentMap['taro-checkbox']
export const Progress = componentMap['taro-progress']
export const RadioGroup = componentMap['taro-radio-group']
export const Radio = componentMap['taro-radio']
export const SwiperItem = componentMap['taro-swiper-item']
export const Video = componentMap['taro-video']

// Form components
export const Input = createFormsComponent('taro-input', 'input')
export const Textarea = createFormsComponent('taro-textarea', 'input')
export const Picker = createFormsComponent('taro-picker', 'change')
export const Switch = createFormsComponent('taro-switch', 'change', 'checked')
export const Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box'])

export function initVue3Components(app) {
  app.config.isCustomElement = tag => /^taro-/.test(tag) || tag === 'root' || tag === 'block'

  for (const [name, component] of Object.entries(componentMap)) {
    app.component(name, component)
  }

  app.component('taro-input', Input)
  app.component('taro-textarea', Textarea)
  app.component('taro-picker', Picker)
  app.component('taro-switch', Switch)
  app.component('taro-slider', Slider)
  app.component('taro-text', Text)
  app.component('taro-image', Image)
  app.component('taro-icon', Icon)
  app.component('taro-scroll-view', ScrollView)
}

export {
  // others
  Text,
  Image,
  Icon,
  ScrollView
}
`

fs.writeFileSync(distH5Vue3IndexPath, distH5vue3IndexNew, { encoding: 'utf-8' })

2、在package.json里面的build:h5，改為：

"build:h5": "node ./config/h5-building-script.js && taro build --type h5",

3、在config里的index.js的h5里面新增

 webpackChain(chain) {
      chain.resolve.alias
        .set(
          '@tarojs/components$',
          '@tarojs/components/dist-h5/vue3/index.js'
        )
    },

終于就可以成功引入ui了