Vue3 模板

Vue3 UI

• package.json同级
• components/slButton/element.vue

<template><div class="dddiv"><span>测试321</span></div>
</template><script setup>defineOptions({name: "sl-button"
});
</script><style scoped>.dddiv span{color: red;
}
</style>  

• components/slButton/index.js

import element from "./element.vue";
element.install = (app) => app.component(element.name, element);
export default element;

• components/function.js

export const ceshi = ()=>{console.log('123')
}

• components/index.js

import slButton from "./slButton/index"
import {ceshi} from "./function"const components = [slButton];const install = (app, opts = {}) => {components.forEach((component) => {app.use(component);});app.config.globalProperties.$ceshi = ceshi;
};const Sl = {install,slButton
};export { slButton, install };
export default Sl;

使用

• main.js

import Sl from '../components/index'
// 打包使用需要引入css
createApp(App).use(SL).mount('#app');<sl-button></sl-button>import { getCurrentInstance } from "vue";
const { appContext } = getCurrentInstance();
appContext.config.globalProperties.$ceshi();

UI 文档

npm i vitepress -D

• package.json

"scripts": {"docs:dev": "vitepress dev docs","docs:build": "vitepress build docs","docs:serve": "vitepress serve docs"}

• package.json 同级
• docs 创建

docs 目录结构

• .vitepress
  • theme
    • index.js
  • config.js
• component
  • slbutton.md
• get-started
  • index.md
• guid
  • index.md
• img
  • logo.ico
  • s.png
• install
  • index.md
• index.md

.vitepress

• theme/index.js

import DefaultTheme from "vitepress/theme";
import Sll from "../../../components/index";
// 引入打包之后的需要cssexport default {...DefaultTheme,enhanceApp: async ({ app }) => {app.use(Sll);},
};

component

• slbutton.md
• \ 需去掉

# button<ClientOnly>
<sl-button></sl-button>
</ClientOnly>::: details 显示代码\```html
<sl-button></sl-button>
\```:::

get-started

• index.md

---
title: 快速上手
---## 安装请参考 [安装](../install/) 章节## 单个引入## 全局引入

guid

• index.md

---
title: UI
---# UI👀 介绍- 本 UI 框架是基于 Vue3 实现的。📌 项目特点- UI🔮 视觉稿- UI🚲 为什么叫   UI- UI

install

• index.md
• \ 需去掉

---
title: 安装
---# 安装推荐安装  xxx@版本\```bash
npm install xxx@版本
\```或\```bash
yarn add xxx@版本
\```

index.md

---
layout: homefeatures:
- title: 简易好学icon: ⚡details: 基于 VUE3
- title: Vue 驱动icon: 🖖details: 享受 Vue 的开发体验，实践最流行的技术。
- title: s-uiicon: 🛠️details: s-ui
---