first commit

README.md

@@ -0,0 +1 @@
+# g-element-plus-components-doc

docs/.vuepress/config.js

@@ -0,0 +1,38 @@
+// 配置
+export default {
+    // 网站标题
+    title: '基于element-plus二次封装组件',
+    // 部署的基础路径
+    base: '/docs/',
+    // 配置网站html的head标签
+    head: [],
+    // 主题配置
+    themeConfig: {
+        nav: [
+            {
+                text: '首页',
+                link: '/'
+            }
+        ],
+        sidebar: [
+            {
+                text: '介绍',
+                link: '/intro/',
+                items: [
+                    { text: '介绍', link: '/intro/' },
+                    { text: '快速开始', link: '/getting-started/' },
+                    // { text: '图标选择器', link: '/g-e-choose-icon/' },
+                    // { text: '表单', link: '/g-e-form/' },
+                    // { text: '弹框表单', link: '/g-e-modal-form/' },
+                    // { text: '表格', link: '/g-e-table/' },
+                ]
+            },
+        ],
+        docFooter: { prev: '上一篇', next: '下一篇' },
+        lastUpdatedText: "最近更新时间"
+    },
+    markdown: {
+        lineNumbers: true
+    },
+    lastUpdated: true,
+}

docs/g-e-choose-icon/index.md

@@ -0,0 +1,30 @@
+## 图标选择器
+用户点击按钮，弹出框显示所有图标，点击图标可以复制图标组件标签。
+
+### 基本用法
+<div style="padding: 1em; margin: 1em; border: 1px solid #eee">
+    <g-e-choose-icon title="选择标题" v-model:visible="visible" type="primary">
+      选择图标
+    </g-e-choose-icon>
+</div>
+
+### 代码示例
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visible = ref(false)
+</script>
+
+- 图标插件依赖`@element-plus/icons-vue`
+  ```shell
+     pnpm install @element-plus/icons-vue
+  ```
+- 示例
+  ```js
+      <g-e-choose-icon title="选择图标" v-model:visible="visible" type="primary">选择图标</g-e-choose-icon>
+      <script lang="ts" setup>
+          import { ref } from 'vue';
+
+          const visible = ref(false)
+      </script>
+  ```

docs/getting-started/index.md

@@ -0,0 +1,41 @@
+## 快速开始
+
+### 版本
+`g-element-plus-components`目前还处于快速开发迭代中。
+
+### 安装
+```shell
+# 选择一个你喜欢的包管理器
+
+# NPM
+$ npm install g-element-plus-components --save
+
+# Yarn
+$ yarn add g-element-plus-components
+
+# pnpm
+$ pnpm install g-element-plus-components
+```
+
+### 用法
+- 全局引入
+  - 在`main.ts`中全局引入
+    ```js
+      import gUI from 'g-element-plus-components';
+      import 'g-element-plus-components/style.css';
+
+      const app = createApp(App);
+      app.use(ElementPlus).use(gUI)
+      app.mount('#app')
+    ```
+
+- 按需引入
+  - 在`main.ts`中单个引入即可
+    ```js
+      import GChooseArea from 'g-element-plus-components/choose-area'
+      import 'g-element-plus-components/choose-area/style.css'
+    
+      const app = createApp(App);
+      app.use(ElementPlus).use(GChooseArea)
+      app.mount('#app')
+    ```

docs/intro/index.md

@@ -0,0 +1,6 @@
+## 介绍
+`g-element-plus-components`主要是基于`element-plus`库二次封装的业务型通用组件。主要的目的：
+- `1.`通过简单的`json`化配置，可以快速形成业务所需组件，快速形成页面，提高开发效率。
+- `2.`支持组件再次拓展，易于再次定制化开发。
+- `3.`大大缩减了渲染页面的重复代码，有效地提高了代码质量，增强了代码可读性。
+- `4.`形成统一规范，便于管理。