vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3.0使用taro-ui-vue3引入组件不生效

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

作者：红噔噔

这篇文章主要介绍了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了

总结

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

您可能感兴趣的文章:
阅读全文