Anview NPM | npm.io

Anview ⚡

Vue3 UI Components Library

注：该仓库主要记录从 0 搭建一个组件库的方法，包括组件文档的编写

克隆代码到本地

# gitee
git clone https://gitee.com/anpc/anview.git

安装依赖

pnpm install

命令介绍

# 本地开发环境
pnpm docs:dev

# 打包组件库
pnpm build

# 发布到 npm，tips: 需要将npm的registry切换到原始的（https://registry.npmjs.org/）并提前登录
pnpm release

# 工具命令: 创建要开发的组件，此命令回创建组件的基本文件和添加文档
pnpm gen ComponentName

# 工具命令: 删除组件，会删除与该组件相关的文件和文档
pnpm del ComponentName

⚡ 使用说明

安装依赖

npm install anview

全局注册

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import 'anview/dist/style.css'
import anview from 'anview'
import App from './App.vue'

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

使用

<an-button>Default</an-button>
<an-button type="primary">Primary</an-button>
<an-button type="success">Success</an-button>
<an-button type="info">Info</an-button>
<an-button type="warning">Warning</an-button>
<an-button type="danger">Danger</an-button>

组件中直接使用

<template>
  <AnButton>Default</AnButton>
</template>

<script setup lang='ts'>
import { AnButton } from 'anview'
</script>

浏览器直接引入

直接通过浏览器的 HTML 标签导入 anview，然后就可以使用全局变量 ESDrager 了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/anview/dist/style.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <an-button>Default</an-button>
    <an-button type="primary">Primary</an-button>
    <an-button type="success">Success</an-button>
    <an-button type="info">Info</an-button>
    <an-button type="warning">Warning</an-button>
    <an-button type="danger">Danger</an-button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/anview"></script>
  <script>
    const { createApp } = Vue
    const app = createApp({})
    app.use(anview)
    app.mount('#app')
  </script>
</body>
</html>

anview

@everything-registry/sub-chunk-1145

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago