As-vue3-ui NPM

介绍

AS-Vue3-Ui-Template 是一个vue3组件库模板

全局配置

修改专属于你的ui库的名字 根目录下的.env文件中的VITE_UI_NAME；setting.js中的name。

目前默认为as，即生成的文件、组件、打出来的包都是as开头的。比如button叫as-button。

如果你要改你自己的，修改这两个文件即可。

开始创建组件

看package.json文件，直接使用npm run gen命令开始交互式创建，你只需要输入组件名和中文名、描述即可

组件支持全局导入、按需导入、手动导入

全局导入

    //main.ts
    import ui from 'as-vue3-ui';
    import 'as-vue3-ui/as-ui/style.css'
            
    app.use(ui)

按需导入

    // 安装 unplugin-vue-components/vite
    npm install unplugin-vue-components/vite -D；
    /// vite.config.ts
    import Components from 'unplugin-vue-components/vite';

    Components({
        ...,
        resolvers：[
            {
                 type: 'component',
                resolve: (name) => {
                 if (name.startsWith('As')) {
                      return { name, from: 'ui' };//ui是你的库名
                }
            }
        ]
    })

手动导入

    import { AsButton } from 'as-vue3-ui'

    app.component('as-button',AsButton)

注意：无论哪种方式，都需要在main.ts中导入全局样式：import 'as-vue3-ui/as-ui/style.css';

npm命令行脚本（可忽略）

npm init -y：生成描述文件

属性名	描述
`name`	包的名字，默认是这个文件夹的名字，要求不能是npm上重名的
`version`	包的版本，默认是1.0.0
`description`	包描述
`main`	入口文件，默认是index.js
`keyword`	包的关键词，用于npm上搜索
`author`	作者
`license`	开源协议