UI -- Vue3

Vue3 模板

Vue3 UI

  • package.json同级
  • components/slButton/element.vue
js 复制代码
<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
js 复制代码
import element from "./element.vue";
element.install = (app) => app.component(element.name, element);
export default element;
  • components/function.js
js 复制代码
export const ceshi = ()=>{
    console.log('123')
}
  • components/index.js
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
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 文档

bash 复制代码
npm i vitepress -D
  • package.json
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
js 复制代码
import DefaultTheme from "vitepress/theme";
import Sll from "../../../components/index";
// 引入打包之后的需要css

export default {
    ...DefaultTheme,
    enhanceApp: async ({ app }) => {
        app.use(Sll);
    },
};

component

md 复制代码
# button


<ClientOnly>
<sl-button></sl-button>
</ClientOnly>

::: details 显示代码

\```html
<sl-button></sl-button>
\```

:::

get-started

md 复制代码
---
title: 快速上手
---

## 安装

请参考 [安装](../install/) 章节


## 单个引入
 
## 全局引入
 

guid

md 复制代码
---
title: UI
---

# UI


 

👀 介绍

- 本 UI 框架是基于 Vue3 实现的。

📌 项目特点

- UI

🔮 视觉稿

- UI

🚲 为什么叫   UI

- UI

install

md 复制代码
---
title: 安装
---

# 安装

推荐安装  xxx@版本

\```bash
npm install xxx@版本
\```

或

\```bash
yarn add xxx@版本
\```

index.md

md 复制代码
---
layout: home


features:
- title: 简易好学
  icon: ⚡
  details: 基于 VUE3
- title: Vue 驱动
  icon: 🖖
  details: 享受 Vue 的开发体验,实践最流行的技术。
- title: s-ui
  icon: 🛠️
  details: s-ui
---
相关推荐
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
共享ui设计和前端开发人才9 小时前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui
ui设计前端开发老司机9 小时前
UI前端大数据处理性能瓶颈突破:分布式计算框架的应用
ui
前端开发与ui设计的老司机9 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘10 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)11 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中11 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互