介绍

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 | 开源协议

登录npm

npm login

注意：需要先切回官方的镜像源https://registry.npmjs.org

npm config set registry https://registry.npmjs.org

发布npm

npm publish

更新已经发布的包

比如： 创建一个 README.md 文件之后，需要修改版本号，再发布。

npm version patch：如果你不想手动改版本号，该命令会自动帮你调增版本号 参数名 | 描述 :-: | :-: patch | 小变动，比如修复bug等，版本号变动 v1.0.0->v1.0.1 minor | 增加新功能，不影响现有功能,版本号变动 v1.0.0->v1.1.0 major | 破坏模块对向后的兼容性，版本号变动 v1.0.0->v2.0.0

发布 npm publish

注意：npm publish发布时 需要package.json 中不存在"type": "module"