@seresweb/website-component

安装

npm i @seresweb/website-component

使用

提供了完整引用和按需引用两种方式

完整引用

import { createApp } from 'vue';
import WebsiteComponent from '@seresweb/website-component';
import '@seresweb/website-component/dist/index.css';
import App from './App.vue';

const app = createApp(App);

app.use(WebsiteComponent).mount('#app');

按需引用

自动导入

安装 unplugin-vue-components。

配置 vite.config.ts

import Components from 'unplugin-vue-components/vite';
import { ComponentsResolver } from '@seresweb/website-component';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [ComponentsResolver()],
    }),
  ],
});

配置 tsconfig.json

{
  "compilerOptions": {
    "types": ["@seresweb/website-component/dist/global.d.ts"]
  }
}

这样可以直接在模版中使用组件，例：

<template>
  <ScDropdown />
</template>

<script setup lang="js">
// 不需要手动导入
</script>

手动导入

安装 @vavt/vite-plugin-auto-import-style。

配置 vite.config.ts

import { defineConfig } from 'vite';
import LibPlugin from '@vavt/vite-plugin-auto-import-style';

export default defineConfig({
  plugins: [LibPlugin()],
});

在模版中使用组件，例：

<template>
  <ScDropdown />
</template>

<script setup lang="js">
// 需要手动导入
import { ScDropdown } from '@seresweb/website-component'
</script>

开发手册

全局组件命名规则：Sc + 组件名称，例：ScCard，其中Sc来自@seresweb/website-component的seres和component的首字母（不采用 swc 这个保留字）。

注意！！！

开发组件 ScMyButton时，组件对应的文件夹及文件没有特殊要求，但是，要求样式文件 my-button.scss 必须是这种类型。因为 resolver.ts 中的处理逻辑限制如此！

调试

在 dev 目录下新增 test-components 目录，然后在目录下新建*.vue文件，npm run dev 启动项目，这些调试组件会自动加载到页面上。

开发流程

1. 在packages/components下新增以组件名称作为组件目录。
2. 在组件目录下新增index.ts和需要的组件，并在index.ts的完善自动注册并导出。
3. 在packages/styles下新增以组件名称作为样式文件，如layz-image.scss，并在index.scss中导入。
4. 无需修改components下的index.ts，因为已经在resolver.ts中做了自动处理。
5. 在dev/test-components下调试组件。

发布

目前无自动发布流程，请在本地构建后发布（请务必拉取 main 分支后再进行本地构建））

1. 本地构建

npm run build

2. 更新版本号

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease]

1.0.0-0
| | | | - 测试版本号
| | | - 补丁版本
| | - 功能版本
| - 主版本

2. 推送

npm publish --access public