按需引入

  1. <template>
  2.   <view class="index">
  3.     <view class="index">
  4.       <AtNoticebar marquee>
  5.         欢迎使用 Taro UI Vue
  6.       </AtNoticebar>
  7.       <AtButton type="primary" :on-click="handleClick">
  8.         AtButton
  9.       </AtButton>
  10.       <AtToast :is-opened="show" :text="msg" :on-close="handleClose"></AtToast>
  11.     </view>
  12.   </view>
  13. </template>
  15. <script>
  16. // 按需引入, 更小的应用体积
  17. import { AtButton, AtToast, AtNoticebar } from 'taro-ui-vue'
  18. import "taro-ui-vue/dist/style/components/button.scss"
  19. import "taro-ui-vue/dist/style/components/toast.scss"
  20. import "taro-ui-vue/dist/style/components/noticebar.scss"
  21. import './index.scss'
  22. export default {
  23.   components: {
  24.     AtButton,
  25.     AtToast,
  26.     AtNoticebar
  27.   },
  28.   data () {
  29.     return {
  30.       msg: 'Hello world!',
  31.       show: false
  32.     }
  33.   },
  34.   methods: {
  35.     handleClick () {
  36.       this.show = true
  37.     },
  38.     handleClose () {
  39.       this.show = false
  40.     }
  41.   },
  42. }
  43. </script>

全局引入

import Vue from 'vue'
import './app.scss'
import 'taro-ui-vue/dist/style/index.scss'
import TaroUi from 'taro-ui-vue'
Vue.use(TaroUi)
const App = {
  onShow (options) {
  },
  render(h) {
    // this.$slots.default 是将要会渲染的页面
    return h('block', this.$slots.default)
  }
}

export default App