快速开始

本章节你可以了解到 Vital Design 的安装配置与使用。

安装

将包解压到你的项目 node_modules 中，结构如下：

  node_modules
  └─ vital-design
  └─ @vital-design
    └─ shared
    └─ use
    └─ icons
    └─ styles

下载地址：Vital Design

Sass

组件库依赖 sass ，在使用之前需要确认项目中是否已经安装了 sass，如果没有安装，可以通过以下命令进行安装：

# npm
npm i sass@1.62.1 -D

# yarn
yarn add sass@1.62.1 -D

# pnpm
pnpm add sass@1.62.1 -D

WARNING

Sass 3.0.0 后的版本废弃了部分 API，使用会有警告/兼容性问题，建议使用推荐版本 (1.78.0之前)。

导入组件

使用 easycom 自动引入

easycom 是 uni-app 组件自动导入规则，可以不用引用、注册，直接在页面中使用。

// pages.json
{
  "pages": [
    // ......
  ],

 "easycom": {
  "autoscan": true,
  "custom": {
    "^vd-(.*)": "vital-design/components/$1/$1.vue",
  }
 }
}

基于 Vite 配置自动引入组件

可通过

import Uni from '@dcloudio/vite-plugin-uni';
import Components from '@uni-helper/vite-plugin-uni-components';
import { vitalDesignResolver } from 'vital-design/resolver';

export default defineConfig({
  root: process.cwd(),
  base: './',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  plugins: [
    Components({
      resolvers: [vitalDesignResolver()],
      dts: 'src/components.d.ts',
    }),
    Uni(),
  ]
});

使用

通过上方文档安装配置之后，您的项目已支持组件自动引入，可直接在页面中使用组件。

<vd-button>按钮</vd-button>