vue3.0使用taro-ui-vue3引入组件不生效的问题及解决

 更新时间:2024年03月15日 09:43:04   作者:红噔噔  
这篇文章主要介绍了vue3.0使用taro-ui-vue3引入组件不生效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

这两天一直研究云闪付小程序,开始和同事好不容易用云闪付的官方ui研究了,但是害怕后期在多个平台上线部署出现不兼容的问题,无奈只好另辟蹊径,选择taro来实现‘一处代码,多处运行’,我们采用Vue3.0+TS+Sass+taro-ui-vue3,在安装编译一直出现问题,掉落我们几根宝贵的头发

这里把本次遇到的坑总结下:

第一步:确保已安装全局的vue3环境,在安装taro yarn global add @tarojs/cli

项目初始化

使用命令创建模板项目:

$ 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>

可是得到的运行结果是这样,审查了元素发现是【object object】

结果找了好久,发现引入组件里面有一个说明文档,里面有详细的说明

- 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 构建脚本: [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了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue小图标favicon不显示的解决方案

    vue小图标favicon不显示的解决方案

    本篇文章主要介绍了vue小图标favicon不显示的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • VUE前端如何处理后端接口返回的图片详解

    VUE前端如何处理后端接口返回的图片详解

    在现代Web开发中,前端应用经常需要从后端接口获取图片数据,下面这篇文章主要介绍了VUE前端如何处理后端接口返回的图片的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • mint-ui 时间插件使用及获取选择值的方法

    mint-ui 时间插件使用及获取选择值的方法

    下面小编就为大家分享一篇mint-ui 时间插件使用及获取选择值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue3+element Plus使用el-tabs标签页解决页面刷新不回到默认页的问题

    vue3+element Plus使用el-tabs标签页解决页面刷新不回到默认页的问题

    这篇文章主要介绍了vue3+element Plus使用el-tabs标签页页面刷新不回到默认页的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue.js 实现v-model与{{}}指令方法

    vue.js 实现v-model与{{}}指令方法

    这篇文章主要介绍了vue.js 实现v-model与{{}}指令方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue父子组件的数据传递示例

    vue父子组件的数据传递示例

    这篇文章主要介绍了vue父子组件的数据传递示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue3前端获取文件的绝对路径问题解决

    vue3前端获取文件的绝对路径问题解决

    这篇文章主要给大家介绍了关于vue3前端获取文件的绝对路径问题解决的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue3根据动态字段绑定v-model的操作代码

    Vue3根据动态字段绑定v-model的操作代码

    最近在学习vue技术,开发表格的时候,想把表格做成组件,那查询条件就需要动态生成,这就遇到一个问题,vue怎么动态给v-model变量值,本文通过实例代码给大家介绍,对Vue3动态绑定v-model实例代码感兴趣的朋友一起看看吧
    2022-10-10
  • Vue Promise解决回调地狱问题实现方法

    Vue Promise解决回调地狱问题实现方法

    这篇文章主要介绍了Vue Promise解决回调地狱问题,总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路
    2023-01-01
  • Vue快速实现通用表单验证功能

    Vue快速实现通用表单验证功能

    这篇文章主要介绍了Vue快速实现通用表单验证功能,本文通过一个小例子给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12

最新评论