Configuration

Warning

Before configuring the SeeYouUI component library, please ensure you have installed it.

Import SeeYouUI in main.js

// main.js
import SeeYouUI from "see-u-ui";

// #ifdef VUE3
import { createSSRApp } from "vue";
export function createApp() {
  const app = createSSRApp(App);
  app.use(SeeYouUI);
  return {
    app,
  };
}
// #endif

Import SeeYouUI's global SCSS theme file in uni.scss

Install via Dcloud

/* uni.scss */
@import "@/uni_modules/see-u-ui/theme.scss";

Install via NPM

/* uni.scss */
@import "see-u-ui/src/theme.scss";

Configure easycom component auto-import in pages.json

Tip

After configuring easycom auto-import, you can use SeeYouUI components directly in your project without manual imports.

Install via Dcloud

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^see-(.*)": "@/uni_modules/see-u-ui/components/see-$1/index.vue"
    }
  },
  "pages": [
    // ...
  ]
}

Install via NPM

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^see-(.*)": "see-u-ui/src/components/see-$1/index.vue"
    }
  },
  "pages": [
    // ...
  ]
}

🎉 Next, you can check out Quick Start or try writing a Button component.

Without using easycom

If you do not wish to use easycom auto-import, you can manually import components in the pages where you need them.

Warning

We strongly recommend using easycom auto-import to avoid the tedious process of manual imports.

Notice

When not using easycom auto-import, there will be no code intelligence/hints.

<template>
  <view class="container">
    <SeeButton title="Primary Button" type="primary" />
  </view>
</template>

<script lang="ts" setup>
import { SeeButton } from "see-u-ui";
</script>