taro+vue3 引入 taro-ui-vue3

1、

 npm install taro-ui-vue3

2、app.js 引入所有样式

// 引用全部组件样式
import 'taro-ui-vue3/dist/style/index.scss'

3、编译成H5

在项目的 config 目录下增加一个 h5 构建脚本: 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' })

将 package.json 下的 build:h5 命令修改为： 

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

 

在 config/index.js 中的 h5 下添加 webpack alias 设置：

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

cnpm run dev:h5