快速开始

安装

选择一个你喜欢的包管理器。

npm

npm install @pixelium/web-vue

yarn

yarn @pixelium/web-vue

pnpm

pnpm install @pixelium/web-vue

兼容性

Pixelium Design 支持在以下环境运行：

ECMAScript	Edge	Firefox	Chrome	Safari
≥2020	≥88	≥78	≥87	≥14

如果您需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill。

完整导入

如果你不在意包大小，或者你会用到几乎所有的组件，我们推荐使用完整导入。

import { createApp } from 'vue'
import App from './App.vue'
import Pixelium from '@pixelium/web-vue'
import '@pixelium/web-vue/dist/pixelium-vue.css'
// Import the font
import '@pixelium/web-vue/dist/font.css'

createApp(App)
  .use(Pixelium)
  .mount('#app')

按需导入

Pixelium Design 支持基于 ESModule 的 Tree Shaking，你可以直接从 @pixelium/web-vue/es 直接进行按需导入。

样式文件也会被自动导入，请确保你的构建工具支持在 JS 文件中导入样式。

• Vite：默认支持；
• Webpack：通常需要借助 css-loader 和 style-loader；
• Rollup：通常需要借助 rollup-plugin-postcss 和 postcss；
• 其他构建工具请参考它们的文档。

请确保项目 Typescript 在 4.7 版本以上，避免类型解析异常。

// Import the font at the project entry
import '@pixelium/web-vue/dist/font.css'

// Use components in the business code by on-demand import
import { Button, Link } from '@pixelium/web-vue/es'