release: 2.0.0发布
kailong321200875
4 years ago
parent
0e3eb4ba8b
commit
b9f96d485f
@ -0,0 +1,13 @@
|
||||
# 更新日志
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2021-10-24`
|
||||
|
||||
### Features
|
||||
|
||||
- vite 版本发布
|
||||
|
||||
### Docs
|
||||
|
||||
- 更新对应文档
|
||||
@ -0,0 +1,22 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
/dist*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
@ -0,0 +1,107 @@
|
||||
module.exports = {
|
||||
title: 'vue-element-plus-admin',
|
||||
description: '种一棵树最好的时间是十年前，其次就是现在。',
|
||||
base: process.argv[2] === 'dev' ? '/' : '/dist-doc/', // 这是部署到github相关的配置
|
||||
// base: '/',
|
||||
// base: '/dist-doc2.0/',
|
||||
// base: '/ue/2019/doc/vue-standard/dist/',
|
||||
markdown: {
|
||||
lineNumbers: false // 代码块显示行号
|
||||
},
|
||||
themeConfig: {
|
||||
search: true, // 是否开启搜索
|
||||
searchMaxSuggestions: 10, // 搜索最大条数
|
||||
// 侧边栏
|
||||
sidebar: {
|
||||
'/guide/': [
|
||||
{
|
||||
title: '基础',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/guide/',
|
||||
'/guide/quick-start',
|
||||
'/guide/configuration',
|
||||
'/guide/router',
|
||||
'/guide/mock'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '进阶',
|
||||
collapsable: false,
|
||||
children: ['/guide/standard', '/guide/style', '/guide/role']
|
||||
}
|
||||
],
|
||||
'/components/': [
|
||||
{
|
||||
title: '组件',
|
||||
collapsable: false,
|
||||
children: ['/components/']
|
||||
},
|
||||
{
|
||||
title: '全局组件',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/components/svg-icon',
|
||||
'/components/com-table',
|
||||
'/components/com-search',
|
||||
'/components/com-dialog',
|
||||
'/components/com-detail'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '普通组件',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/components/echart',
|
||||
'/components/preview',
|
||||
'/components/avatars',
|
||||
'/components/highlight',
|
||||
'/components/editor',
|
||||
'/components/qrcode'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// 导航栏
|
||||
nav: [
|
||||
{
|
||||
text: '首页',
|
||||
link: '/'
|
||||
},
|
||||
{
|
||||
text: '指南',
|
||||
link: '/guide/'
|
||||
},
|
||||
{
|
||||
text: '功能组件',
|
||||
link: '/components/'
|
||||
},
|
||||
{
|
||||
text: '更新日志',
|
||||
link: '/changLog/changLog'
|
||||
},
|
||||
{
|
||||
text: '预览',
|
||||
link: 'http://8.133.179.48:4000/dist-pro/'
|
||||
},
|
||||
{
|
||||
text: 'Github',
|
||||
link: 'https://github.com/kailong321200875/vue-element-plus-admin'
|
||||
},
|
||||
{
|
||||
text: 'Gitee',
|
||||
link: 'https://gitee.com/kailong110120130/vue-element-plus-admin'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
[
|
||||
'vuepress-plugin-typescript',
|
||||
{
|
||||
tsLoaderOptions: {
|
||||
// ts-loader 的所有配置项
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
home: true
|
||||
actionText: 快速上手 →
|
||||
actionLink: /guide/
|
||||
features:
|
||||
- title: 技术栈
|
||||
details: 基于vue3、typescript4、vite2、element-plus构建
|
||||
- title: 组件封装
|
||||
details: 对常用功能进行组件化封装，统一维护。
|
||||
- title: 权限验证
|
||||
details: 根据权限动态加载路由，渲染侧边栏
|
||||
- title: 说明
|
||||
details: 本文档归纳出一些常见的开发规范，注重团队之间的协同开发，保证代码的可读性。
|
||||
- title: 积累
|
||||
details: 本文档会定期积累常见问题，知识点。
|
||||
- title: 持续更新
|
||||
details: 本文档将会持续更新，当做一个长期项目来维护，期望这个文档能够给开发人员带来帮助。
|
||||
footer: MIT Licensed | Copyright © 2021-present Archer
|
||||
---
|
||||
@ -0,0 +1,13 @@
|
||||
# 更新日志
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2021-10-24`
|
||||
|
||||
### Features
|
||||
|
||||
- vite 版本发布
|
||||
|
||||
### Docs
|
||||
|
||||
- 更新对应文档
|
||||
@ -0,0 +1,46 @@
|
||||
# 介绍
|
||||
|
||||
为了更好演示，`vue-element-plus-admin`对`element-ui`的所有组件进行了全局的按需引入注册，这样也就导致了打包之后可能会出现不需要的组件代码，开发者可以根据实际情况，去掉全局的按需引入，改为局部引入，或者删除不必要的全局注册，减少打包体积。具体代码可查看`src/element-ui/index.ts`。
|
||||
|
||||
除了 `element-ui` 中的组件进行了全局注册，本项目还全局注册了使用率比较高的组件，具体代码可查看`src/components/index.ts`，如下
|
||||
|
||||
```javaScript
|
||||
import Vue from 'vue'
|
||||
import SvgIcon from './SvgIcon/index.vue' // svg组件
|
||||
import Table from './Table/index.vue' // ComTable组件
|
||||
import Search from './Search/index.vue' // Search组件
|
||||
import Dialog from './Dialog/index.vue' // Dialog组件
|
||||
import Detail from './Detail/index.vue' // Detail组件
|
||||
|
||||
// register globally
|
||||
Vue.component('SvgIcon', SvgIcon)
|
||||
Vue.component('ComTable', Table)
|
||||
Vue.component('ComSearch', Search)
|
||||
Vue.component('ComDialog', Dialog)
|
||||
Vue.component('ComDetail', Detail)
|
||||
|
||||
import '@/assets/icons' // icon
|
||||
|
||||
```
|
||||
|
||||
`vue-element-plus-admin`的组件大部分没有进行全局注册。采用了哪里使用哪里引入的方式，如下
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<qrcode text="vue-element-plus-admin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Qrcode: () => import('_c/Qrcode/index.vue')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
# ComDetail 详情
|
||||
|
||||
用于详情预览的组件，基于`element-ui`的`Row Col`组件进行二次封装。
|
||||
|
||||
`ComDetail` 组件位于`src/components/Detail`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<com-detail :data="data" :schema="schema" title="基础示例" message="辅助文字" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const data = reactive<IObj>({
|
||||
username: 'chenkl',
|
||||
nickName: '梦似花落。',
|
||||
age: 26,
|
||||
phone: '13655971xxxx',
|
||||
email: '502431556@qq.com',
|
||||
addr: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的地址',
|
||||
sex: '男',
|
||||
certy: '35058319940712xxxx'
|
||||
})
|
||||
const schema = ref<IObj>([
|
||||
{
|
||||
field: 'username',
|
||||
label: '用户名'
|
||||
},
|
||||
{
|
||||
field: 'nickName',
|
||||
label: '昵称'
|
||||
},
|
||||
{
|
||||
field: 'phone',
|
||||
label: '联系电话'
|
||||
},
|
||||
{
|
||||
field: 'email',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
field: 'addr',
|
||||
label: '地址',
|
||||
span: 24
|
||||
}
|
||||
])
|
||||
|
||||
return {
|
||||
data,
|
||||
schema
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------- | ----------------------------------------- | ------- | ----------------- | ------- |
|
||||
| title | 详情标题 | string | — | — |
|
||||
| collapsed | 是否可折叠 | boolean | true/false | true |
|
||||
| message | 辅助提示 | string | — | — |
|
||||
| border | 是否需要边框 | boolean | true/false | true |
|
||||
| data | 需要展示的数据 | object | — | — |
|
||||
| schema | 布局展示的数据，具体项详见[下表](#Schema) | array | — | [] |
|
||||
| vertical | 是否标题和内容各占一行 垂直布局 | boolean | false/true | false |
|
||||
| labelWidth | 标题宽度 | string | — | — |
|
||||
| labelAlign | 标题位置 | string | left/right/center | left |
|
||||
| borderColor | 边框颜色 | string | — | #f0f0f0 |
|
||||
| labelBg | 标题背景颜色 | string | — | #fafafa |
|
||||
|
||||
## Schema<span id="Schema"></span>
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----- | ---------------------------------- | ------ | ------- | ------ |
|
||||
| field | 字段名，与 data 中的数据项字段对应 | string | — | — |
|
||||
| label | 标题 | string | — | — |
|
||||
| span | 在一行中的占比 | number | [1, 24] | 12 |
|
||||
|
||||
## Slot
|
||||
|
||||
| name | 说明 |
|
||||
| -------------- | ---------------------- |
|
||||
| {field} | 标题内容 |
|
||||
| {field}Content | 对应字段需要展示的内容 |
|
||||
@ -0,0 +1,30 @@
|
||||
# ComDialog 弹窗
|
||||
|
||||
为了保证 `弹窗` 样式的统一性，对 `element-ui` 的 `Dialog` 组件进行二次封装。
|
||||
|
||||
`ComDialog` 组件位于`src/components/Dialog`
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
<com-dialog v-model="visible" title="提示">
|
||||
<div style="height: 1000px;">
|
||||
我是弹窗内容
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="visible = false">确定</el-button>
|
||||
</template>
|
||||
</com-dialog>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
::: tip 提示
|
||||
除以下参数外，官方文档内的 `Attributes` 都支持，具体可以参考 [element Dailog](https://element.eleme.cn/#/zh-CN/component/dialog)
|
||||
:::
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| showFullscreen | 是否显示全屏按钮 | boolean | false/true | true |
|
||||
| draggable | 是否可拖拽 | boolean | false/true | true |
|
||||
@ -0,0 +1,53 @@
|
||||
# ComSearch 查询
|
||||
|
||||
针对常用的查询业务场景，对 `element` 的 `Form` 组件进行二次封装。
|
||||
|
||||
只需传入 `data` 即可渲染整个查询组件。
|
||||
|
||||
`Search` 组件代码位于`src/components/Search`
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
<div class="searh">
|
||||
<com-search
|
||||
:data="data"
|
||||
@search-submit="searchSubmit"
|
||||
@reset-submit="resetSubmit"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| labelWidth | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 | string | — | - |
|
||||
| labelPosition | 表单域标签的宽度的文字布局 | string | left/center/right | right |
|
||||
| hideRequiredAsterisk | 隐藏所有表单项的必选标记 | boolean | true/false | false |
|
||||
| data | 表单数据，详见[下表](#Data) | array | — | [] |
|
||||
| rules | 表单验证规则 | object | — | — |
|
||||
| showReset | 是否显示重置按钮 | boolean | false/true | true |
|
||||
| layout | 布局风格 | string | right/bottom/classic | classic |
|
||||
|
||||
### <span id="Data">Data</span>
|
||||
|
||||
::: tip 提示
|
||||
除以下参数外，官方文档内的 `表单组件` 的 `Attributes` 也都支持，具体可以参考 [form-item](https://element.eleme.cn/#/zh-CN/component/form)
|
||||
:::
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| field | 每个查询项的字段名 | string | — | — |
|
||||
| label | 每个查询项的标题 | string | — | — |
|
||||
| value | 每个查询项的值 | any | — | — |
|
||||
| itemType | 每个查询项的类型，根据此值渲染不同的组件，开发者可以进行扩展 | string | switch/input/select/radio/datePicker | — |
|
||||
| onChange | 是否为当前项进行数据变化监听 | boolean | true/false | false |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|---------- |-------- |-------- |
|
||||
| searchSubmit | 点击查询时的回调事件 | data |
|
||||
| resetSubmit | 点击重置时的回调事件 | data |
|
||||
| change | 查询项改变时的回调事件 | { field, value } |
|
||||
@ -0,0 +1,29 @@
|
||||
# 图片裁剪 组件
|
||||
|
||||
`Cropper` 组件位于[src/components/Cropper](http://192.168.169.57:9000/scm/index.html#contentPanel;9IRMTD52f3;null;vue-doc/src/components/Cropper/index.vue;content)
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
// 引入
|
||||
import Cropper from '_c/Cropper'
|
||||
|
||||
// 使用
|
||||
<cropper @on-crop="handleCroped" />
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| src | string | — | — | 默认展示的图片地址 |
|
||||
| preview | boolean | true | false | 是否展示预览区域 |
|
||||
| moveStep | number | false | true | 是否禁用 |
|
||||
| clearable | boolean | 4 | — | 每次移动多少距离 |
|
||||
| cropButtonText | string | 裁剪 | — | 裁剪按钮文字 |
|
||||
|
||||
## 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
|---------- |-------- |-------- |
|
||||
| on-crop | 裁剪时的回调事件 | base64 |
|
||||
@ -0,0 +1,47 @@
|
||||
# Echart 图表
|
||||
|
||||
基于`echarts`二次封装的图表的组件，内置了主题色。
|
||||
|
||||
`Echart` 组件代码位于`src/components/Echart`
|
||||
|
||||
::: tip 提示
|
||||
需要给一个固定高度，才能展示出图表
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<echart :options="pieOptions" :height="'300px'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { pieOptions } from './echart-data'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Echart: () => import('_c/Echart/index.vue')
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
pieOptions
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | 图表类名 | string | — | chart |
|
||||
| width | 图表宽度 | string | — | 100% |
|
||||
| height | 图表高度 | string | — | 200px |
|
||||
| theme | 主题 | string | light/dark/default | default |
|
||||
| options | 图表的配置项，具体可参考[echarts](https://echarts.apache.org/zh/api.html#echarts) | object | — | — |
|
||||
@ -0,0 +1,69 @@
|
||||
# Editor 富文本
|
||||
|
||||
基于 `wangeditor` 进行二次封装的富文本组件。
|
||||
|
||||
`Editor` 组件位于`src/components/Editor`
|
||||
|
||||
::: tip 提示
|
||||
如果该富文本组件无法满足业务需求，可以自行引入其他富文本插件。
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<editor :value="content" @change="handleChange" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Editor: () => import('_c/Editor/index.vue')
|
||||
},
|
||||
setup() {
|
||||
const content = ref<string>('默认展示数据')
|
||||
function handleChange(html: string, text: string) {
|
||||
console.log(html, text)
|
||||
}
|
||||
return {
|
||||
content,
|
||||
handleChange
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --------- | ------------------------------------------ | ------ | --------- | ------ |
|
||||
| value | 富文本内容 | string | — | — |
|
||||
| valueType | 富文本绑定的值的类型 | string | html/text | html |
|
||||
| config | wangeditor 配置项，具体详见[下表](#Config) | object | — | — |
|
||||
|
||||
## Config<span id="Config"></span>
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| height | 富文本高度 | number | — | 500 |
|
||||
| zIndex | 层级 | number | — | 0 |
|
||||
| placeholder | 提示文字 | string | — | 请输入文本 |
|
||||
| focus | 是否聚焦 | boolean | true/false | false |
|
||||
| onchangeTimeout | 几秒监听一次变化 | number | — | 1000 |
|
||||
| customAlert | 自定义提示 | function | — | — |
|
||||
| menus | 按钮菜单 | array | — | ['head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list','justify','quote','emoticon','image','video','table','code','splitLine','undo','redo'] |
|
||||
| colors | 颜色 | array | — | ['#000000','#eeece0','#1c487f','#4d80bf'] |
|
||||
| fontNames | 字体 | array | — | ['黑体','仿宋','楷体','标楷体','华文仿宋','华文楷体','宋体','微软雅黑','Arial','Tahoma','Verdana','Times New Roman','Courier New'] |
|
||||
| lineHeights | 行间距 | array | — | ['1','1.15','1.6','2','2.5','3'] |
|
||||
| showFullScreen | 是否全屏 | boolean | true/false | false |
|
||||
|
||||
## Methods
|
||||
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ------- | --------- | ---------------------- |
|
||||
| getHtml | 获取 HTML | Function(html: string) |
|
||||
| getText | 获取 text | Function(text: string) |
|
||||
| getJson | 获取 Json | Function(json: object) |
|
||||
@ -0,0 +1,36 @@
|
||||
# MarkDown编辑器 组件
|
||||
|
||||
基于 `tui-editor` 进行二次封装的 `MarkDown编辑器` 组件。
|
||||
|
||||
`MarkDown` 组件位于[src/components/MarkDown](http://192.168.169.57:9000/scm/index.html#contentPanel;9IRMTD52f3;null;vue-doc/src/components/MarkDown/index.vue;content)
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
// 引入
|
||||
import MarkDown from '_c/MarkDown'
|
||||
|
||||
// 使用
|
||||
<mark-down ref="markdown" :content="content" height="600px" />
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| content | string | — | — | 编辑器内容 |
|
||||
| height | string | 400px | — | 编辑器高度 |
|
||||
| initialEditType | string | markdown | wysiwyg | 编辑器类型 |
|
||||
| hideToolBar | boolean | true | false | 是否隐藏工具栏 |
|
||||
| hideFooter | boolean | false | true | 是否隐藏底部操作栏 |
|
||||
| hideHeader | boolean | false | true | 是否隐藏头部操作栏 |
|
||||
| placeholder | string | 请输入文章标题 | — | 提示语 |
|
||||
| btnText | string | 发布 | — | 发布按钮文字 |
|
||||
| hideUi | boolean | false | true | 隐藏预览区域 |
|
||||
|
||||
## 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
|---------- |-------- |-------- |
|
||||
| change | 编辑器内容改变时的回调 | data |
|
||||
| setMarkdown | 点击发布时的回调 | { title, value, html } |
|
||||
@ -0,0 +1,30 @@
|
||||
# More 组件
|
||||
|
||||
显示更多组件。
|
||||
|
||||
`More` 组件位于[src/components/More](http://192.168.169.57:9000/scm/index.html#contentPanel;9IRMTD52f3;null;vue-doc/src/components/More/index.vue;content)
|
||||
|
||||
## 使用
|
||||
|
||||
``` vue
|
||||
// 引入
|
||||
import More from '_c/More/index.vue'
|
||||
|
||||
// 使用
|
||||
<More
|
||||
:style-obj="{
|
||||
width: '600px',
|
||||
height: '100px',
|
||||
lineHeight: '28px'
|
||||
}"
|
||||
content="有两个年轻人同在一家车行里工作，两个人关系很好，以兄弟相称。他们在这家车行已经做了两年了，每天除了修理汽车外什么也没有。哥哥总不肯闲着，他一会儿扫地，一会儿擦玻璃，有时还帮助别人干活儿。弟弟却不这么勤快，没有急活儿的时候他总是懒洋洋地躺着。一天，车行里来了一位中年主顾，他说汽车出了点毛病，让他们给修理一下。弟弟刚刚吃完饭，正在休息呢，哪里肯干活。于是，哥哥走了过去，把弟弟手中的抹布接过来，给汽车做了检查。车子没什么大问题，就是很长时间没修养过了，于是他对那位先生说：“您放心地交给我吧，车子明天一定能修好。”客人听到这话，放心地走了。哥哥一刻不停地忙了起来，他不但修理好了汽车的毛病，还把汽车里里外外擦得一尘不染。这时，躺在一旁的弟弟嘲笑他说：“老兄，别太傻了，不该干的活儿也干了，那么勤快有什么用!”哥哥却笑了笑说：“反正我也没事做，擦擦车我并没有受损失呀，等明天顾客来取车时看到车子焕然一新心里一定很高兴。”第二天，那个顾客来取车了，他看到修好的汽车后非常吃惊，连声感谢修车的哥哥，并对他说：“我是一个大公司的董事长，你为我修车的这种勤快、细致、周到的精神，使我深受感动。我认为你是一个优秀的人，你愿意到我的公司去工作吗?”哥哥的命运从此发生了改变，不久，经过努力他当上了这个公司的部门经理;而弟弟却仍然在车行里做着他觉得枯燥的工作。"
|
||||
/>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
|---------- |-------- |---------- |---------- |---------- |
|
||||
| content | string | — | — | 内容 |
|
||||
| lineClamp | number | 1 | — | 默认超过几行之后隐藏 |
|
||||
| styleObj | object | — | — | 内容样式 |
|
||||
@ -0,0 +1,48 @@
|
||||
# Preview 预览
|
||||
|
||||
图片预览组件，实现函数式调用组件，无需基于图片进行点击预览。
|
||||
|
||||
`Preview` 组件代码位于`src/components/Preview`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { createImgPreview } from '_c/Preview'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const imgList = ref<IObj>([
|
||||
'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',
|
||||
'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'
|
||||
])
|
||||
function showHasImg(i: number) {
|
||||
createImgPreview({
|
||||
index: i,
|
||||
imageList: imgList.value
|
||||
})
|
||||
}
|
||||
return {
|
||||
imgList,
|
||||
showHasImg
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| -------- | ------------------ | -------- | ---------- | ------ |
|
||||
| index | 默认展示第几张图片 | number | — | 0 |
|
||||
| list | 需要预览的图片列表 | array | — | [] |
|
||||
| zIndex | 层级 | number | — | 2000 |
|
||||
| infinite | 是否无缝 | boolean | false/true | true |
|
||||
| onClose | 关闭时的回调 | function | — | — |
|
||||
| onSelect | 点击时的回调 | function | — | — |
|
||||
@ -0,0 +1,58 @@
|
||||
# Qrcode 二维码
|
||||
|
||||
基于 `qrcode.js` 封装的二维码组件。
|
||||
|
||||
`Qrcode` 组件代码位于`src/components/Qrcode`
|
||||
|
||||
## 使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<qrcode text="vue-element-plus-admin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Qrcode: () => import('_c/Qrcode/index.vue')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| text | 二维码内容 | string/array | — | — |
|
||||
| tag | 组件标签 | string | — | canvas |
|
||||
| options | qrcode.js 配置项 | object | — | — |
|
||||
| width | 二维码宽度 | number | — | 200 |
|
||||
| disabled | 是否过期 | boolean | true/false | false |
|
||||
| disabledText | 过期提示内容 | string | — | 二维码已失效 |
|
||||
| logo | logo 图标，如果为 object 类型，配置项详见[下表](#Logo) | object/string | — | — |
|
||||
|
||||
## Logo<span id="Logo"></span>
|
||||
|
||||
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | -------------------- | ------ | ------ | --------- |
|
||||
| logoSize | 二维码 logo 尺寸 | number | — | 0.15 |
|
||||
| bgColor | 二维码 logo 背景颜色 | string | — | #ffffff |
|
||||
| borderSize | 二维码 logo 边框尺寸 | number | — | 0.05 |
|
||||
| crossOrigin | 二维码 logo 跨域设置 | string | — | anonymous |
|
||||
| borderRadius | 二维码 logo 边框圆角 | number | — | 8 |
|
||||
| logoRadius | 二维码 logo 圆角 | number | — | 0 |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ---------------------- | -------- |
|
||||
| done | 二维码加载成功后的回调 | dataURL |
|
||||
| click | 二维码点击后的回调 | — |
|
||||
| disabledClick | 二维码失效点击后的回调 | — |
|
||||
@ -0,0 +1,101 @@
|
||||
# 快速上手
|
||||
|
||||
::: tip 提示
|
||||
本项目需要[Node.js](https://nodejs.org/en/)版本>=14
|
||||
:::
|
||||
|
||||
## 代码获取
|
||||
|
||||
::: warning 注意
|
||||
注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。
|
||||
:::
|
||||
|
||||
```sh
|
||||
# clone 代码
|
||||
git https://github.com/kailong321200875/vue-element-plus-admin.git
|
||||
```
|
||||
|
||||
## 安装
|
||||
|
||||
### 安装 Node.js
|
||||
|
||||
如果您电脑未安装[Node.js](https://nodejs.org/en/)，请安装它。
|
||||
|
||||
#### 验证
|
||||
|
||||
```sh
|
||||
# 出现相应npm版本即可
|
||||
npm -v
|
||||
|
||||
# 出现相应node版本即可
|
||||
node -v
|
||||
```
|
||||
|
||||
### 安装依赖
|
||||
|
||||
推荐使用[Yarn](https://github.com/yarnpkg/yarn)进行依赖安装。
|
||||
|
||||
在项目根目录下，打开命令窗口执行，耐心等待安装完成即可
|
||||
|
||||
```sh
|
||||
# 安装依赖
|
||||
yarn
|
||||
```
|
||||
|
||||
::: tip 提示
|
||||
安装依赖时`husky`安装失败
|
||||
|
||||
请查看你的源码是否从`github`直接下载的，直接下载是没有`.git`文件夹的，而`husky`需要依赖`git`才能安装。此时需使用`git init`初始化项目，再尝试重新安装即可。
|
||||
|
||||
或者，当前安装依赖的命令框，没有`git`环境，请确保存在`git`环境。
|
||||
:::
|
||||
|
||||
## 运行项目
|
||||
|
||||
```sh
|
||||
# 运行项目
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## npm scripts
|
||||
|
||||
```sh
|
||||
"scripts": {
|
||||
# 安装所有依赖
|
||||
"i:all": "npm run i && npm run docs:i",
|
||||
# 安装项目依赖
|
||||
"i": "yarn install",
|
||||
# 启动项目
|
||||
"dev": "vite --mode base",
|
||||
# 打包生产环境
|
||||
"build:pro": "vue-tsc --noEmit && vite build --mode pro",
|
||||
# 打包开发环境
|
||||
"build:dev": "vue-tsc --noEmit && vite build --mode dev",
|
||||
# 打包测试环境
|
||||
"build:test": "vue-tsc --noEmit && vite build --mode test",
|
||||
# 本地预览打包后的文件
|
||||
"serve": "vite preview",
|
||||
# 检测所有依赖更新
|
||||
"check": "npx npm-check-updates",
|
||||
# 删除所有的node包
|
||||
"clean": "npx rimraf docs/node_modules && npx rimraf node_modules",
|
||||
# 删除文档的node包
|
||||
"clean:docs": "npx rimraf docs/node_modules",
|
||||
# 删除主依赖
|
||||
"clean:main": "npx rimraf node_modules",
|
||||
# eslint检测修复
|
||||
"lint": "eslint --fix --ext .js,.ts,.vue ./src",
|
||||
# prettier格式化
|
||||
"format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
|
||||
# stylelint 格式化
|
||||
"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
|
||||
# 提交前的统一格式化
|
||||
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
|
||||
# 只对已提交文件进行格式化
|
||||
"lint:pretty": "pretty-quick --staged",
|
||||
# husky初始化
|
||||
"postinstall": "husky install",
|
||||
# ts 类型检测
|
||||
"ts:check": "vue-tsc --noEmit"
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,42 @@
|
||||
# 风格指南
|
||||
|
||||
## 介绍
|
||||
|
||||
::: tip 推荐
|
||||
本项目的风格指南主要是参照 `vue` 官方的[风格指南](https://cn.vuejs.org/v2/style-guide/index.html)。在真正开始使用该项目之前建议先阅读一遍指南，这能帮助让你写出更规范和统一的代码。当然每个团队都会有所区别。其中大部分规则也都配置在了[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)之中，当没有遵循规则的时候会报错，详细内容见[eslint](http://192.168.169.57/ue/2019/doc/vue-standard/dist/advanced/eslint.html#介绍)章节。
|
||||
|
||||
当然也有一些特殊的规范，是不能被 `eslint` 校验的。需要人为的自己注意，并且来遵循。最主要的就是文件的命名规则，这里以本项目来举例。
|
||||
:::
|
||||
|
||||
## Component
|
||||
|
||||
所有的`Component`文件都是以大写开头 `(PascalCase)`，这也是官方所推荐的。
|
||||
|
||||
但除了 `index.vue`。
|
||||
|
||||
- @/views/example-demo/example-dialog/components/Detail.vue
|
||||
- @/components/Charts/index.vue
|
||||
|
||||
## JS | TS 文件
|
||||
|
||||
所有的`.js .ts`文件都遵循横线连接 `(kebab-case)`。
|
||||
|
||||
例子：
|
||||
|
||||
- @/utils/dom-uitls.ts
|
||||
|
||||
## Views
|
||||
|
||||
在`views`文件下，代表路由的`.vue`文件都使用横线连接 `(kebab-case)`，代表路由的文件夹也是使用同样的规则。
|
||||
|
||||
例子：
|
||||
|
||||
- @/views/icons/index.vue
|
||||
|
||||
使用横线连接 `(kebab-case)`来命名`views`主要是出于以下几个考虑。
|
||||
|
||||
横线连接 `(kebab-case)` 也是官方推荐的命名规范之一 [文档](https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)
|
||||
|
||||
`views`下的`.vue`文件代表的是一个路由，所以它需要和`component`进行区分(component 都是大写开头)
|
||||
页面的`url` 也都是横线连接的，比如`https://www.xxx.admin/export-excel`，所以路由对应的`view`应该要保持统一
|
||||
没有大小写敏感问题。
|
||||
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "vue-standard",
|
||||
"version": "1.0.0",
|
||||
"description": "'vue规范文档'",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vuepress dev docs",
|
||||
"build": "vuepress build docs"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"vuepress": "^1.8.2"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,51 +0,0 @@
|
||||
import { isServer } from './validate'
|
||||
let lastTime = 0
|
||||
const prefixes = 'webkit moz ms o'.split(' ')
|
||||
|
||||
let requestAnimationFrame: any
|
||||
let cancelAnimationFrame: any
|
||||
;(() => {
|
||||
const NO_LOOP = () => {}
|
||||
const getWindowFrame = (name: any) => {
|
||||
return name
|
||||
}
|
||||
if (isServer) {
|
||||
requestAnimationFrame = cancelAnimationFrame = NO_LOOP
|
||||
} else {
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
cancelAnimationFrame = window.cancelAnimationFrame
|
||||
let prefix
|
||||
for (let i = 0; i < prefixes.length; i++) {
|
||||
if (requestAnimationFrame && cancelAnimationFrame) {
|
||||
break
|
||||
}
|
||||
prefix = prefixes[i]
|
||||
requestAnimationFrame =
|
||||
requestAnimationFrame || window[getWindowFrame(prefix + 'RequestAnimationFrame')]
|
||||
cancelAnimationFrame =
|
||||
cancelAnimationFrame ||
|
||||
window[getWindowFrame(prefix + 'CancelAnimationFrame')] ||
|
||||
window[getWindowFrame(prefix + 'CancelRequestAnimationFrame')]
|
||||
}
|
||||
|
||||
// If the current browser does not support requestAnimationFrame and cancelAnimationFrame, it will fall back to setTimeout
|
||||
if (!requestAnimationFrame || !cancelAnimationFrame) {
|
||||
requestAnimationFrame = function (callback: Fn) {
|
||||
const currTime = new Date().getTime()
|
||||
const timeToCall = Math.max(0, 16 - (currTime - lastTime))
|
||||
const id = window.setTimeout(() => {
|
||||
/* eslint-disable-next-line */
|
||||
callback(currTime + timeToCall)
|
||||
}, timeToCall)
|
||||
lastTime = currTime + timeToCall
|
||||
return id
|
||||
}
|
||||
|
||||
cancelAnimationFrame = function (id: any) {
|
||||
window.clearTimeout(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
export { requestAnimationFrame, cancelAnimationFrame }
|
||||
Loading…
Reference in New Issue