This commit is contained in:
zouzhibing
parent
014e5f6804
commit
03444338c9
|
|
@ -0,0 +1,5 @@
|
|||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'@vue/standard',
|
||||
'@vue/typescript/recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/docs
|
||||
dist
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
|
|
|||
77
README.md
77
README.md
|
|
@ -1,75 +1,24 @@
|
|||
# 简介
|
||||
vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-plus实现。它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件。
|
||||
|
||||
## 效果预览
|
||||
|
||||
### 在线预览点击 —— [企业级、通用型中后台前端解决方案 ](http://182.61.5.190:8889/)
|
||||
|
||||
### 附上github地址点击跳转 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
|
||||
|
||||
## 目录结构介绍
|
||||
# ad
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
├─assets 放置一些静态文件
|
||||
├─components 放置组件
|
||||
├─layout 首页布局
|
||||
│ ├─components
|
||||
│ │ ├─Sidebar 侧边栏配置
|
||||
│ │ ├─TagsView 标签栏配置
|
||||
│ │ └─UHeader 头部内容配置
|
||||
│ └─hooks
|
||||
├─router 路由配置
|
||||
├─store 数据存储
|
||||
├─styles 样式文件
|
||||
├─utils 工具方法
|
||||
└─views 页面配置方法
|
||||
└─permission 路由拦截 权限配置
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
|
||||
## 技术栈
|
||||
vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
|
||||
## 实现功能
|
||||
- 登录逻辑
|
||||
- 权限校验
|
||||
- 侧边栏导航显示
|
||||
- 打印
|
||||
- 地图
|
||||
- 头像裁剪
|
||||
- 无限滚动
|
||||
- 多标签显示
|
||||
- 退出
|
||||
- 其他各组件
|
||||
|
||||
|
||||
## 项目 master 分支 基于vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
```
|
||||
# 克隆项目
|
||||
git clone https://github.com/zouzhibin/vue-admin-perfect.git
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
|
||||
# 本地开发 启动项目
|
||||
yarn serve
|
||||
```
|
||||
|
||||
|
||||
## 项目 uniapp 分支 基于 uniapp +vuex +element scss
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
# 克隆项目 切换 uniapp分支
|
||||
git clone https://github.com/zouzhibin/vue-admin-perfect.git
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
|
||||
# 本地开发 启动项目
|
||||
hbuilder运行浏览器启动
|
||||
yarn build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
|
|||
18
deploy.sh
18
deploy.sh
|
|
@ -1,18 +0,0 @@
|
|||
#强制推送
|
||||
#!/usr/bin/env bash
|
||||
set -e
|
||||
npm run build
|
||||
cd dist
|
||||
touch .nojekyll
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master:gh-pages
|
||||
git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master:gh-pages
|
||||
|
||||
cd -
|
||||
exec /bin/bash
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
|
|
@ -1,11 +1,12 @@
|
|||
{
|
||||
"name": "vue-admin-perfect",
|
||||
"name": "ad",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run serve",
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@better-scroll/core": "^2.4.2",
|
||||
|
|
@ -37,14 +38,35 @@
|
|||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
"@vue/cli-plugin-babel": "~4.5.8",
|
||||
"@vue/cli-plugin-eslint": "~4.5.8",
|
||||
"@vue/cli-plugin-router": "~4.5.8",
|
||||
"@vue/cli-plugin-typescript": "~4.5.8",
|
||||
"@vue/cli-plugin-vuex": "~4.5.8",
|
||||
"@vue/cli-service": "~4.5.8",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/eslint-config-standard": "^5.1.2",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.0",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"lint-staged": "^9.5.0",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"typescript": "~4.1.5"
|
||||
},
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts,tsx}": [
|
||||
"vue-cli-service lint",
|
||||
"git add"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
push.sh
13
push.sh
|
|
@ -1,13 +0,0 @@
|
|||
#强制推送
|
||||
#!/usr/bin/env bash
|
||||
set -e
|
||||
git init
|
||||
git add -A
|
||||
git commit -m '🎉 feat: init project'
|
||||
git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master
|
||||
git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master
|
||||
exec /bin/bash
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<router-view/>
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component"/>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
<div>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="通知" name="first">
|
||||
<div class="item-child"> github开源地址：<el-button type="text" @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child"> github开源地址：<el-button type="text" @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child"> github开源地址：<el-button type="text" @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<section class="app-main" v-if="isReload" >
|
||||
<section class="app-main" v-if="isReload">
|
||||
<router-view v-slot="{ Component,route }">
|
||||
<transition name="fade-slide" mode="out-in" appear>
|
||||
<keep-alive v-if="route.meta&&route.meta.keepAlive">
|
||||
<component :is="Component" :key="route.path" />
|
||||
<component :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
<component :is="Component" :key="route.path" v-else/>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -42,12 +42,12 @@ const othersRouter = {
|
|||
name: 'grid-sorter',
|
||||
meta: { title: '卡片拖拽', }
|
||||
},
|
||||
{
|
||||
path: 'splitpane',
|
||||
component: () => import('@/views/other/splitpane.vue'),
|
||||
name: 'splitpane',
|
||||
meta: { title: '分割模块',}
|
||||
},
|
||||
// {
|
||||
// path: 'splitpane',
|
||||
// component: () => import('@/views/other/splitpane.vue'),
|
||||
// name: 'splitpane',
|
||||
// meta: { title: '分割模块',}
|
||||
// },
|
||||
{
|
||||
path: 'qrcode',
|
||||
component: () => import('@/views/other/qrcode.vue'),
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@ import MigrationCharts from './components/migration/index.vue'
|
|||
|
||||
<style>
|
||||
.echarts-map{
|
||||
height: calc(100vh - 95px);
|
||||
height: calc(100vh - 93px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="text" class="item">文字按钮</el-button>
|
||||
<el-button type="text" disabled class="item">文字按钮</el-button>
|
||||
<el-button type="primary" link class="item">文字按钮</el-button>
|
||||
<el-button type="primary" link disabled class="item">文字按钮</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,28 +2,23 @@
|
|||
<template>
|
||||
<u-container-layout class="row">
|
||||
<div style="margin-bottom: 10px">卡片拖拽排序</div>
|
||||
<el-button class="btn " @click="sorter" type="primary" style="margin-bottom: 20px">
|
||||
还原
|
||||
</el-button>
|
||||
|
||||
<el-button class="btn " @click="sorter" type="primary" style="margin-bottom: 20px">还原</el-button>
|
||||
<el-button class="btn " @click="getDataAction" type="primary" style="margin-bottom: 20px;margin-left: 20px">获取数据</el-button>
|
||||
<div class="col-6" style="">
|
||||
<el-row :gutter="10">
|
||||
<draggable
|
||||
class="list-group"
|
||||
tag="transition-group"
|
||||
:component-data="{
|
||||
tag: 'ul',
|
||||
type: 'transition-group',
|
||||
name: !drag ? 'flip-list' : null
|
||||
}"
|
||||
v-model="message"
|
||||
v-bind="dragOptions"
|
||||
@start="drag = true"
|
||||
<draggable
|
||||
:list="message"
|
||||
:animation="300"
|
||||
@end="drag = false"
|
||||
@start="drag = true"
|
||||
item-key="order"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
|
||||
v-bind="dragOptions"
|
||||
class="list-group"
|
||||
ghost-class="ghost"
|
||||
@change="onMoveCallback"
|
||||
:move="getdata"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6"
|
||||
>
|
||||
<el-card shadow="hover" style="width: 100%" class="list-group-item">
|
||||
|
|
@ -35,33 +30,21 @@
|
|||
<div style="margin-top: 10px">按住拖拽排序</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
</draggable>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-row>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
<!--<li class="list-group-item" :style="{backgroundColor:`${element.color}` }">-->
|
||||
<!-- <i-->
|
||||
<!-- :class="-->
|
||||
<!-- element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'-->
|
||||
<!-- "-->
|
||||
<!-- @click="element.fixed = !element.fixed"-->
|
||||
<!-- aria-hidden="true"-->
|
||||
<!-- ></i>-->
|
||||
<!-- {{ element.name }}-->
|
||||
<!--</li>-->
|
||||
<script lang="ts" setup>
|
||||
// 参考文档 https://sortablejs.github.io/vue.draggable.next/#/transition-example-2
|
||||
// https://github.com/SortableJS/vue.draggable.next/blob/master/package.json
|
||||
import draggable from "vuedraggable";
|
||||
import {computed, ref} from "vue";
|
||||
import {computed, ref,reactive} from "vue";
|
||||
import {getColor} from '@/utils/index'
|
||||
|
||||
const message = ref([]);
|
||||
const tags = ref([]);
|
||||
|
||||
let icon = ['management','baseball','Basketball','BellFilled','Bell',
|
||||
'AddLocation','Aim','AlarmClock','Apple','ArrowDownBold','Burger',
|
||||
|
|
@ -81,7 +64,6 @@
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
const drag = ref(false)
|
||||
|
||||
// 设置排序参数
|
||||
|
|
@ -97,6 +79,19 @@
|
|||
const sorter = ()=>{
|
||||
message.value = message.value.sort((a, b) => a.name - b.name);
|
||||
}
|
||||
|
||||
const onMoveCallback = (val) => {
|
||||
console.log('拖动前的索引 :' + val.moved.newIndex);
|
||||
console.log('拖动后的索引 :' + val.moved.oldIndex);
|
||||
};
|
||||
// 查看最新的数据
|
||||
const getdata = () => {
|
||||
console.log(11111111);
|
||||
};
|
||||
// 查看最新的数据
|
||||
const getDataAction = () => {
|
||||
console.log(message.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<el-form-item>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="text" @click="isExpand=!isExpand">{{ isExpand?'合并':'展开' }}<el-icon>
|
||||
<el-button link @click="isExpand=!isExpand" type="primary">{{ isExpand?'合并':'展开' }}<el-icon>
|
||||
<arrow-down v-if="!isExpand"/>
|
||||
<arrow-up v-else/>
|
||||
</el-icon></el-button>
|
||||
|
|
|
|||
|
|
@ -72,6 +72,9 @@
|
|||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default { name: 'comprehensive' };
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, onMounted} from "vue";
|
||||
import * as dayjs from 'dayjs'
|
||||
|
|
@ -294,9 +297,7 @@
|
|||
},500)
|
||||
})
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default { name: 'comprehensive' };
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,9 @@
|
|||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default { name: 'inline-table' };
|
||||
</script>
|
||||
<script lang="ts" setup >
|
||||
import {computed, ref} from "vue";
|
||||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||||
|
|
@ -177,9 +179,7 @@
|
|||
}
|
||||
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default { name: 'inline-table' };
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,26 @@
|
|||
const path = require('path')
|
||||
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, '.', dir)
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '.', dir)
|
||||
}
|
||||
module.exports = {
|
||||
publicPath: "./",
|
||||
chainWebpack: config => {
|
||||
config.resolve.alias
|
||||
.set('static',resolve('public/static'));
|
||||
config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg,
|
||||
config.module
|
||||
.rule('svg-sprite-loader')
|
||||
.test(/\.svg$/)
|
||||
.include
|
||||
.add(resolve('src/icons')) // 处理svg目录
|
||||
.end()
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.options({
|
||||
symbolId: 'icon-[name]'
|
||||
})
|
||||
},
|
||||
lintOnSave: false,
|
||||
publicPath: './',
|
||||
chainWebpack: config => {
|
||||
config.resolve.alias
|
||||
.set('static', resolve('public/static'))
|
||||
config.module.rules.delete('svg') // 重点：删除默认配置中处理svg,
|
||||
config.module
|
||||
.rule('svg-sprite-loader')
|
||||
.test(/\.svg$/)
|
||||
.include
|
||||
.add(resolve('src/icons')) // 处理svg目录
|
||||
.end()
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.options({
|
||||
symbolId: 'icon-[name]'
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue