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;
export const ceshi = ()=>{
console.log('123')
}
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;
使用
import Sl from '../components/index'
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
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
docs 目录结构
- .vitepress
- component
- get-started
- guid
- img
- install
- index.md
.vitepress
import DefaultTheme from "vitepress/theme";
import Sll from "../../../components/index";
export default {
...DefaultTheme,
enhanceApp: async ({
app }) => {
app.use(Sll);
},
};
component
# button
<ClientOnly>
<sl-button></sl-button>
</ClientOnly>
::: details 显示代码
\```html
<sl-button></sl-button>
\```
:::
get-started
---
title: 快速上手
---
## 安装
请参考 [安装](../install/) 章节
## 单个引入
## 全局引入
guid
---
title: UI
---
# UI
👀 介绍
- 本 UI 框架是基于 Vue3 实现的。
📌 项目特点
- UI
🔮 视觉稿
- UI
🚲 为什么叫 UI
- UI
install
---
title: 安装
---
# 安装
推荐安装 xxx@版本
\```bash
npm install xxx@版本
\```
或
\```bash
yarn add xxx@版本
\```
index.md
---
layout: home
features:
- title: 简易好学
icon: ⚡
details: 基于 VUE3
- title: Vue 驱动
icon: 🖖
details: 享受 Vue 的开发体验,实践最流行的技术。
- title: s-ui
icon: 🛠️
details: s-ui
---