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

安裝完成后：

進入項目根目錄

$ 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)引入組件里面有一個說明文檔，里面有詳細的說明

- H5 端

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

- 然后通過 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` 設置：

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

}

按照文檔操作，進行配置

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了

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue中配置使用process.env詳解
process.env?是?Node.js?中的一個環(huán)境對象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下
2023-03-03
Vue使用Multiavatarjs生成自定義隨機頭像的案例
這篇文章給大家介紹了Vue項目中使用Multiavatarjs生成自定義隨機頭像的案例,文中通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下
2023-10-10
詳解Electron中如何使用SQLite存儲筆記
這篇文章主要為大家介紹了Electron中如何使用SQLite存儲筆記示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法(推薦)
vue router給我們提供了兩種頁面間傳遞參數(shù)的方式,一種是動態(tài)路由匹配，一種是編程式導航，接下來通過本文給大家介紹Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法,需要的朋友可以參考下
2018-11-11
Vue項目中實現(xiàn)無感Token刷新的示例
在前端項目中,Token用于用戶認證和權(quán)限管理,文章介紹了在Vue項目中實現(xiàn)Token的無感刷新,包括Token刷新的原理、攔截器的應用和處理Token過期的方法,感興趣的可以了解一下
2024-11-11
Vue輸入框狀態(tài)切換&自動獲取輸入框焦點的實現(xiàn)方法
這篇文章主要介紹了Vue輸入框狀態(tài)切換&自動獲取輸入框焦點的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-05-05
Vuex的store中的Module用法及說明
這篇文章主要介紹了Vuex的store中的Module用法及說明，具有很好的參考價值，希望對大家有所幫助。
2023-01-01
Vue3中emit傳值的具體使用
Emit是Vue3中另一種常見的組件間傳值方式,它通過在子組件中觸發(fā)事件并將數(shù)據(jù)通過事件參數(shù)傳遞給父組件來實現(xiàn)數(shù)據(jù)傳遞,本文就來介紹一下Vue3 emit傳值,感興趣的可以了解一下
2023-12-12
vue實現(xiàn)分頁的三種效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
vue使用websocket連接優(yōu)化性能方式
這篇文章主要介紹了vue使用websocket連接優(yōu)化性能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10