初始化
This commit is contained in:
robin
+23
@@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,19 @@
|
||||
# a
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "a",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"core-js": "^3.6.5",
|
||||
"element-themex": "^1.0.3",
|
||||
"element-ui": "^2.15.9",
|
||||
"glob": "^8.0.3",
|
||||
"lemon-imui": "^1.7.4",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "5.0.0",
|
||||
"node-sass": "^7.0.1",
|
||||
"path": "^0.12.7",
|
||||
"socket.io-client": "^4.5.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "3",
|
||||
"vue-socket.io": "^3.0.10",
|
||||
"vuex": "3",
|
||||
"xe-utils": "^3.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.10",
|
||||
"@vue/cli-service": "~4.5.10",
|
||||
"element-theme-chalk": "^2.15.9",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657141512134" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13861" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M467.387733 96.768L142.574933 383.317333a68.266667 68.266667 0 0 0-23.108266 51.2V887.466667a68.266667 68.266667 0 0 0 68.266666 68.266666h648.533334a68.266667 68.266667 0 0 0 68.266666-68.266666V434.466133a68.266667 68.266667 0 0 0-23.022933-51.114666L557.789867 96.836267a68.266667 68.266667 0 0 0-90.402134-0.085334zM187.733333 434.517333L512.546133 147.933867 836.266667 434.466133V887.466667H187.733333V434.517333z" fill="#444444" p-id="13862"></path><path d="M546.133333 597.333333v221.866667h-68.266666V597.333333a34.133333 34.133333 0 1 1 68.266666 0z" fill="#00B386" p-id="13863"></path></svg>
|
||||
|
After Width: | Height: | Size: 978 B |
+20
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<container></container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container from '@/components/container/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
container
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import 'assets/app.less';
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "global";
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
text-decoration: none;
|
||||
color: @text;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
//封装一些常用样式
|
||||
@text: #303133;
|
||||
|
||||
//靠右
|
||||
.f-r {
|
||||
float: right;
|
||||
}
|
||||
|
||||
//靠左
|
||||
.f-l {
|
||||
float: left;
|
||||
}
|
||||
|
||||
//垂直居中
|
||||
.f-c {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
//内容居中
|
||||
.t-c {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//内容居右
|
||||
.t-r {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
//内容居左
|
||||
.t-l {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
//图标:小
|
||||
.i-s {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
//图标:小+
|
||||
.i-x {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
//图标:中
|
||||
.i-m {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
//图标:大
|
||||
.i-l {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
//内间距:小
|
||||
.p-s {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.p-top-s {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.p-left-s {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.p-right-s {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.p-bottom-s {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
//内间距:小+
|
||||
.p-x {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.p-top-x {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.p-left-x {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.p-right-x {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.p-bottom-x {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
//内间距:中
|
||||
.p-m {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.p-top-m {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.p-left-m {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.p-right-m {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.p-bottom-m {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
//内间距:大
|
||||
.p-l {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.p-top-l {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.p-left-l {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.p-right-l {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.p-bottom-l {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
//外间距:小
|
||||
.m-s {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.m-top-s {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.m-left-s {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.m-right-s {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.m-bottom-s {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
//外间距:小+
|
||||
.m-x {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.m-top-x {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.m-left-x {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.m-right-x {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.m-bottom-x {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
//外间距:中
|
||||
.m-m {
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.m-top-m {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.m-left-m {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.m-right-m {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.m-bottom-m {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
//外间距:大
|
||||
.m-l {
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
.m-top-l {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.m-left-l {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.m-right-l {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.m-bottom-l {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
default-active="navDataIndex0"
|
||||
:router="true"
|
||||
:default-active="$route.path"
|
||||
@open="handleOpen"
|
||||
@close="handleClose">
|
||||
<div v-for="(route,index) in routes" :key="'route'+index">
|
||||
<el-menu-item v-for="(navData,navDataIndex) in route" :index="navData.path" :route="{path: navData.path}" v-if="!index">
|
||||
<!--目录-->
|
||||
<template slot="title">
|
||||
<img class="i-s m-right-s" :src="navData.navigate.icon"/>
|
||||
<span>{{ navData.navigate.name }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<!--二级分组目录-->
|
||||
<el-submenu :index="'submenu'+index" v-if="index">
|
||||
<template slot="title">
|
||||
<span>{{ index }}</span>
|
||||
</template>
|
||||
<el-menu-item v-for="(navData,navDataIndex) in route" :route="{path: navData.path}" :index="navData.path">
|
||||
<img class="i-s m-right-s" :src="navData.navigate.icon"/>
|
||||
<span>{{ navData.navigate.name }}</span>
|
||||
</el-menu-item>
|
||||
|
||||
</el-submenu>
|
||||
</div>
|
||||
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {
|
||||
isCollapse: false,
|
||||
$route : this.$route,
|
||||
routes : []
|
||||
}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
let routes = this.$router.options.routes.map(item => {
|
||||
return {
|
||||
path : item.path,
|
||||
navigate: item.component.navigate,
|
||||
...item.component.navigate,
|
||||
}
|
||||
}).filter(item => !item.notShow)
|
||||
routes = this.$xe.orderBy(routes, [['index', 'desc']])//排序
|
||||
routes = this.$xe.groupBy(routes, 'group') //分组
|
||||
this.routes = routes
|
||||
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
/*min-height: 400px;*/
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<el-divider />
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button>Default</el-button>
|
||||
<el-button>Default</el-button>
|
||||
<el-button>Default</el-button>
|
||||
<el-button>Default</el-button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
:ellipsis="false"
|
||||
>
|
||||
<img src="http://iph.href.lu/200x100?text=LOGO&fg=666666&bg=cccccc" style="height: 38px;">
|
||||
<!-- <div class="flex-grow"/>-->
|
||||
<div class="" class="f-r">
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<el-avatar> U </el-avatar>
|
||||
<span class="f-r" style="line-height: 40px">User Name</span>
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down/>
|
||||
</el-icon>
|
||||
</span>
|
||||
<template slot="dropdown">
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="css">
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.el-menu-demo {
|
||||
height: 58px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!--
|
||||
* @module 页面布局
|
||||
* @desc 组件描述
|
||||
* @author Robin
|
||||
* @date 2022/6/29 01:47
|
||||
-->
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-container>
|
||||
<el-aside width="200px"><myaside></myaside></el-aside>
|
||||
<el-container>
|
||||
<el-header><myheader></myheader></el-header>
|
||||
<el-main>
|
||||
<mymain></mymain>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-divider direction="vertical" class="dashed"/>
|
||||
<el-aside class="mylaside">
|
||||
<mylaside></mylaside>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myheader from './header.vue'
|
||||
import myaside from './aside.vue'
|
||||
import mylaside from './laside.vue'
|
||||
import mymain from './main.vue'
|
||||
import myfooter from './footer.vue'
|
||||
export default {
|
||||
//组件
|
||||
components: {
|
||||
myheader,
|
||||
mymain,
|
||||
myfooter,
|
||||
mylaside,
|
||||
myaside
|
||||
},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.mylaside{
|
||||
width: 375px;
|
||||
}
|
||||
.dashed{
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="laside">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" tab-position="right">
|
||||
<div style="position: absolute;left: 0px;top: 50%;color: #409EFF">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
content="收起"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<DArrowRight/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tab-pane v-for="(data,index) in lasideData" :label="data.label" :name="data.name" :key="'lasideData'+index">
|
||||
<component :is="data.components"></component>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lasideData from '@/components/laside/index.js'
|
||||
|
||||
export default {
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {
|
||||
activeName: '',
|
||||
lasideData: lasideData,
|
||||
}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
this.activeName = this.lasideData[0].name
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.laside {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.demo-tabs {
|
||||
//background-color: #f4f4f5;
|
||||
height: calc(100vh - 58px);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.simple-data {
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.el-tab-pane {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-tabs--card {
|
||||
height: 100vh;
|
||||
/* overflow-y: auto; */
|
||||
}
|
||||
|
||||
.el-tab-pane {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!--
|
||||
/**
|
||||
* container
|
||||
* @module 组件存放位置
|
||||
* @desc 组件描述
|
||||
* @author Robin
|
||||
* @date 2022/6/29 01:51
|
||||
* @param {Object} [title] - 参数说明
|
||||
* @param {String} [columns] - 参数说明
|
||||
* @example 调用示例
|
||||
* <hh></hh>
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,292 @@
|
||||
export default [
|
||||
{
|
||||
label: "表情",
|
||||
children: [
|
||||
{
|
||||
name: "1f600",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f600.png",
|
||||
},
|
||||
{
|
||||
name: "1f62c",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f62c.png",
|
||||
},
|
||||
{
|
||||
name: "1f601",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f601.png",
|
||||
},
|
||||
{
|
||||
name: "1f602",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f602.png",
|
||||
},
|
||||
{
|
||||
name: "1f923",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f923.png",
|
||||
},
|
||||
{
|
||||
name: "1f973",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f973.png",
|
||||
},
|
||||
{
|
||||
name: "1f603",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f603.png",
|
||||
},
|
||||
{
|
||||
name: "1f604",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f604.png",
|
||||
},
|
||||
{
|
||||
name: "1f605",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f605.png",
|
||||
},
|
||||
{
|
||||
name: "1f606",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f606.png",
|
||||
},
|
||||
{
|
||||
name: "1f607",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f607.png",
|
||||
},
|
||||
{
|
||||
name: "1f609",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f609.png",
|
||||
},
|
||||
{
|
||||
name: "1f60a",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f60a.png",
|
||||
},
|
||||
{
|
||||
name: "1f642",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f642.png",
|
||||
},
|
||||
{
|
||||
name: "1f643",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f643.png",
|
||||
},
|
||||
{
|
||||
name: "1263a",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/263a.png",
|
||||
},
|
||||
{
|
||||
name: "1f60b",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f60b.png",
|
||||
},
|
||||
{
|
||||
name: "1f60c",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f60c.png",
|
||||
},
|
||||
{
|
||||
name: "1f60d",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f60d.png",
|
||||
},
|
||||
{
|
||||
name: "1f970",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f970.png",
|
||||
},
|
||||
{
|
||||
name: "1f618",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f618.png",
|
||||
},
|
||||
{
|
||||
name: "1f617",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f617.png",
|
||||
},
|
||||
{
|
||||
name: "1f619",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f619.png",
|
||||
},
|
||||
{
|
||||
name: "1f61a",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f61a.png",
|
||||
},
|
||||
{
|
||||
name: "1f61c",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f61c.png",
|
||||
},
|
||||
{
|
||||
name: "1f92a",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f92a.png",
|
||||
},
|
||||
{
|
||||
name: "1f928",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f928.png",
|
||||
},
|
||||
{
|
||||
name: "1f9d0",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f9d0.png",
|
||||
},
|
||||
{
|
||||
name: "1f61d",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f61d.png",
|
||||
},
|
||||
{
|
||||
name: "1f61b",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f61b.png",
|
||||
},
|
||||
{
|
||||
name: "1f911",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f911.png",
|
||||
},
|
||||
{
|
||||
name: "1f913",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f913.png",
|
||||
},
|
||||
{
|
||||
name: "1f60e",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f60e.png",
|
||||
},
|
||||
{
|
||||
name: "1f929",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f929.png",
|
||||
},
|
||||
{
|
||||
name: "1f921",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f921.png",
|
||||
},
|
||||
{
|
||||
name: "1f920",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f920.png",
|
||||
},
|
||||
{
|
||||
name: "1f917",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f917.png",
|
||||
},
|
||||
{
|
||||
name: "1f60f",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f60f.png",
|
||||
},
|
||||
{
|
||||
name: "1f636",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f636.png",
|
||||
},
|
||||
{
|
||||
name: "1f610",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f610.png",
|
||||
},
|
||||
{
|
||||
name: "1f611",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f611.png",
|
||||
},
|
||||
{
|
||||
name: "1f612",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f612.png",
|
||||
},
|
||||
{
|
||||
name: "1f644",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f644.png",
|
||||
},
|
||||
{
|
||||
name: "1f914",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f914.png",
|
||||
},
|
||||
{
|
||||
name: "1f925",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f925.png",
|
||||
},
|
||||
{
|
||||
name: "1f92d",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f92d.png",
|
||||
},
|
||||
{
|
||||
name: "1f92b",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f92b.png",
|
||||
},
|
||||
{
|
||||
name: "1f92c",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f92c.png",
|
||||
},
|
||||
{
|
||||
name: "1f92f",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f92f.png",
|
||||
},
|
||||
{
|
||||
name: "1f633",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f633.png",
|
||||
},
|
||||
{
|
||||
name: "1f61e",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f61e.png",
|
||||
},
|
||||
{
|
||||
name: "1f61f",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f61f.png",
|
||||
},
|
||||
{
|
||||
name: "1f620",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f620.png",
|
||||
},
|
||||
{
|
||||
name: "1f621",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f621.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "收藏",
|
||||
children: [
|
||||
{
|
||||
name: "1f62c",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f62c.png",
|
||||
},
|
||||
{
|
||||
name: "1f621",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f621.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<lemon-imui
|
||||
:user='this.user'
|
||||
ref='IMUI'
|
||||
@pull-messages='handlePullMessages'
|
||||
@send="handleSend"
|
||||
></lemon-imui>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emoji from './emoji'
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {
|
||||
user: {id: 1, displayName: 'June', avatar: ''}
|
||||
}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {
|
||||
init() {
|
||||
// 初始化联系人数据
|
||||
const {IMUI} = this.$refs;
|
||||
//初始化表情包。
|
||||
IMUI.initEmoji(emoji);
|
||||
//从后端请求联系人数据，包装成下面的样子
|
||||
const contacts = [{
|
||||
id : 2,
|
||||
displayName: '丽安娜',
|
||||
avatar : '',
|
||||
index : 'L',
|
||||
unread : 0,
|
||||
//最近一条消息的内容，如果值为空，不会出现在“聊天”列表里面。
|
||||
//lastContentRender 函数会将 file 消息转换为 '[文件]', image 消息转换为 '[图片]'，对 text 会将文字里的表情标识替换为img标签,
|
||||
lastContent: IMUI.lastContentRender({type: 'text', content: '你在干嘛呢？'}),
|
||||
//最近一条消息的发送时间
|
||||
lastSendTime: 1566047865417,
|
||||
}];
|
||||
IMUI.initContacts(contacts);
|
||||
},
|
||||
//拉取消息列表
|
||||
handlePullMessages(contact, next) {
|
||||
//从后端请求消息数据，包装成下面的样子
|
||||
const messages = [{
|
||||
id : '唯一消息ID',
|
||||
status : 'succeed',
|
||||
type : 'text',
|
||||
sendTime : 1566047865417,
|
||||
content : '你什么才能对接完？',
|
||||
toContactId: contact.id,
|
||||
fromUser : this.user
|
||||
}]
|
||||
//将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。
|
||||
next(messages, true);
|
||||
},
|
||||
//发送消息
|
||||
handleSend(message, next, file) {
|
||||
// ... 调用你的消息发送业务接口
|
||||
|
||||
//执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});
|
||||
next();
|
||||
},
|
||||
//接收消息
|
||||
|
||||
},
|
||||
sockets: {
|
||||
open(data) {
|
||||
console.log('open连接成功', data)
|
||||
this.$socket.emit('joinRoom', {
|
||||
"room_name": '123',
|
||||
"uid": '123',
|
||||
});
|
||||
},
|
||||
error(data){
|
||||
console.log('错误', data)
|
||||
},
|
||||
success(data){
|
||||
console.log('成功', data)
|
||||
},
|
||||
connect() {
|
||||
console.log('连接成功')
|
||||
},
|
||||
disconnect() {
|
||||
console.log('断开连接')
|
||||
},
|
||||
reconnect() {
|
||||
console.log('重新连接')
|
||||
},
|
||||
},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
/**
|
||||
* data
|
||||
* @module 组件存放位置
|
||||
* @desc 组件描述
|
||||
* @author Robin
|
||||
* @date 2022/6/29 06:58
|
||||
* @param {Object} [title] - 参数说明
|
||||
* @param {String} [columns] - 参数说明
|
||||
* @example 调用示例
|
||||
* <hh></hh>
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="always"> 订单金额:123元</el-card>
|
||||
<el-card shadow="always"> 预计销量:123单</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
<el-card shadow="always"> 利润金额:123元</el-card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "data",
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
.el-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
export default [
|
||||
{
|
||||
name:"data",
|
||||
label:"数据看板",
|
||||
components:()=>import("./data.vue"),
|
||||
},
|
||||
{
|
||||
name:"mssages",
|
||||
label:"消息数量",
|
||||
components:()=>import("./mssages.vue"),
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert title="success alert" type="success" effect="dark">
|
||||
<template #default>
|
||||
<p>每个人都不得不面对这些问题. 在面对这种问题时,
|
||||
一般来说, 随机一段废话, 发生了会如何, 不发生又会如何. 这样看来, 就我个人来说, 随机一段废话对我的意义, 不能不说非常重大. 德国曾经说过, 只有在人群中间，才能认识自己。带着这句话, 我们还要更加慎重的审视这个问题: 每个人都不得不面对这些问题. 在面对这种问题时,
|
||||
斯宾诺莎曾经说过, 最大的骄傲于最大的自卑都表示心灵的最软弱无</p>
|
||||
</template>
|
||||
</el-alert>
|
||||
<el-alert title="info alert" type="info" effect="dark"/>
|
||||
<el-alert title="warning alert" type="warning" effect="dark"/>
|
||||
<el-alert title="error alert" type="error" effect="dark"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mssages",
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
const files = require.context('./plugin', true, /index\.js$/); //批量读取模块文件
|
||||
const pluginMain = {}
|
||||
const plugin = files.keys().reduce((modules, path) => {
|
||||
const name = path.replace(/^\.\/(.*)\.js$/, '$1');
|
||||
const module = files(path);
|
||||
// console.log(module);
|
||||
modules[name] = module.default && module.default(Vue) || null;
|
||||
if (modules[name]) {
|
||||
pluginMain[modules[name].name] = modules[name].value
|
||||
}
|
||||
return modules;
|
||||
}, {});
|
||||
Vue.config.productionTip = false
|
||||
// console.log('pluginMain',pluginMain);
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
// components: { App },
|
||||
...pluginMain,
|
||||
}).$mount('#app')
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
/pages/index/index
|
||||
<el-row class="mb-4">
|
||||
<router-link to="/pages/test/index">
|
||||
<el-button>Default</el-button>
|
||||
Go to Foo
|
||||
</router-link>
|
||||
<img src="static/svg/index.svg"/>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
<el-button>中文</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
navigate: {
|
||||
index: 999,//排序(越大越置顶)
|
||||
icon : 'static/svg/index.svg',
|
||||
group: '系统管理',//导航分组
|
||||
name : '首页',//导航名称
|
||||
},
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!--
|
||||
/**
|
||||
* index
|
||||
* @module 组件存放位置
|
||||
* @desc 组件描述
|
||||
* @author Robin
|
||||
* @date 2022/6/28 20:25
|
||||
* @param {Object} [title] - 参数说明
|
||||
* @param {String} [columns] - 参数说明
|
||||
* @example 调用示例
|
||||
* <hh></hh>
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
/pages/test/index
|
||||
<el-row class="mb-4">
|
||||
<router-link to="/pages/index/index">
|
||||
<el-button>Default</el-button>
|
||||
Go to Foo
|
||||
</router-link>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
<el-button>中文</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
navigate: {
|
||||
index: 1,//排序(越大越置顶)
|
||||
icon : 'static/svg/index.svg',
|
||||
group: '分组1',//导航分组名称
|
||||
name : '测试页1',//导航名称
|
||||
},
|
||||
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
{{ count }}
|
||||
<im></im>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import im from '@/components/im/index.vue'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
navigate: {
|
||||
index: 999,//排序(越大越置顶)
|
||||
icon : 'static/svg/index.svg',
|
||||
group: '',//导航分组
|
||||
name : '首页',//导航名称
|
||||
},
|
||||
//组件
|
||||
components: {
|
||||
im
|
||||
},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {
|
||||
...mapState({
|
||||
count: state => state.app.count
|
||||
})
|
||||
},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {
|
||||
...mapActions(['add', 'subtract']),
|
||||
},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!--
|
||||
/**
|
||||
* index
|
||||
* @module 组件存放位置
|
||||
* @desc 组件描述
|
||||
* @author Robin
|
||||
* @date 2022/6/28 20:25
|
||||
* @param {Object} [title] - 参数说明
|
||||
* @param {String} [columns] - 参数说明
|
||||
* @example 调用示例
|
||||
* <hh></hh>
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
/pages/test/index
|
||||
<el-row class="mb-4">
|
||||
<router-link to="/pages/index/index">
|
||||
<el-button>Default</el-button>
|
||||
Go to Foo
|
||||
</router-link>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
<el-button>中文</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
navigate: {
|
||||
notShow : true,//
|
||||
index: 2,//排序(越大越置顶)
|
||||
icon : 'static/svg/index.svg',
|
||||
group: '测试分组',//导航分组名称
|
||||
name : '测试页',//导航名称
|
||||
},
|
||||
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!--
|
||||
/**
|
||||
* index
|
||||
* @module 组件存放位置
|
||||
* @desc 组件描述
|
||||
* @author Robin
|
||||
* @date 2022/6/28 20:25
|
||||
* @param {Object} [title] - 参数说明
|
||||
* @param {String} [columns] - 参数说明
|
||||
* @example 调用示例
|
||||
* <hh></hh>
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
/pages/test/index
|
||||
<el-row class="mb-4">
|
||||
<router-link to="/pages/index/index">
|
||||
<el-button>Default</el-button>
|
||||
Go to Foo
|
||||
</router-link>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
<el-button>中文</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
navigate: {
|
||||
index: 2,//排序(越大越置顶)
|
||||
icon : 'static/svg/index.svg',
|
||||
group: '测试分组',//导航分组名称
|
||||
name : '测试页2',//导航名称
|
||||
},
|
||||
|
||||
//组件
|
||||
components: {},
|
||||
props : [],
|
||||
//数据
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
//计算属性
|
||||
computed: {},
|
||||
//在实例创建完成后被立即调用
|
||||
created() {
|
||||
},
|
||||
//实例被挂载后调用
|
||||
mounted() {
|
||||
},
|
||||
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
|
||||
methods: {},
|
||||
//包含 Vue 实例可用过滤器的哈希表。
|
||||
filters: {},
|
||||
//侦听器
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
export default (Vue)=>{
|
||||
Vue.use(ElementUI);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import '../../assets/global.less';
|
||||
export default (Vue)=>{
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import routes from "../vue-router/pages";
|
||||
|
||||
export default (Vue) => {
|
||||
const files = require.context('../../utils', true, /index\.js$/); //批量读取模块文件
|
||||
const plugin = files.keys().reduce((modules, path) => {
|
||||
const name = path.replace(/^\.\/(.*)\.js$/, '$1');
|
||||
const module = files(path).default();
|
||||
if (module) {
|
||||
Vue.prototype[module.name] = module.value
|
||||
}
|
||||
return modules;
|
||||
}, {});
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import LemonIMUI from 'lemon-imui';
|
||||
import 'lemon-imui/dist/index.css';
|
||||
export default (Vue)=>{
|
||||
Vue.use(LemonIMUI);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
home: '/pages/index/index',//默认首页
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './pages'
|
||||
import config from './config.js'
|
||||
|
||||
export default (Vue) => {
|
||||
Vue.use(VueRouter)
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
//设置默认首页
|
||||
if (config.home) router.addRoute({path: '/', redirect: config.home})
|
||||
return {
|
||||
name : 'router',
|
||||
value: router
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
const Foo = {template: '<div>foo</div>'}
|
||||
const Bar = {template: '<div>bar</div>'}
|
||||
|
||||
const routes = [
|
||||
|
||||
]
|
||||
const files = require.context('../../pages', true, /index\.vue$/); //批量读取模块文件
|
||||
const plugin = files.keys().reduce((modules, path) => {
|
||||
const name = path.replace(/^\.\/(.*)\.vue$/, '$1');
|
||||
const module = files(path).default;
|
||||
//自动加载路由
|
||||
routes.push(
|
||||
{path: '/pages/' + name, component: module},
|
||||
)
|
||||
return modules;
|
||||
}, {});
|
||||
console.log(routes);
|
||||
|
||||
export default routes;
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
https://www.npmjs.com/package/vue-socket.io
|
||||
https://blog.51cto.com/u_15302032/5215140
|
||||
* */
|
||||
|
||||
import SocketIO from "socket.io-client";
|
||||
import VueSocketIO from 'vue-socket.io'
|
||||
|
||||
|
||||
export default (Vue) => {
|
||||
Vue.use(new VueSocketIO({
|
||||
debug: true,
|
||||
connection: SocketIO('http://127.0.0.1:3210'),
|
||||
// vuex: {
|
||||
// store,
|
||||
// actionPrefix: 'SOCKET_',
|
||||
// mutationPrefix: 'SOCKET_'
|
||||
// },
|
||||
options: { path: "/socket.io" } //Optional options
|
||||
}))
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import Vuex from 'vuex'
|
||||
|
||||
const state = {
|
||||
count: 1
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
|
||||
SET_ADD_COUNT : (state) => {
|
||||
state.count++
|
||||
},
|
||||
SET_SUBTRACT_COUNT: (state) => {
|
||||
state.count--
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
// 加
|
||||
add({commit}) {
|
||||
commit('SET_ADD_COUNT')
|
||||
},
|
||||
// 减
|
||||
subtract({commit}) {
|
||||
commit('SET_SUBTRACT_COUNT')
|
||||
}
|
||||
|
||||
}
|
||||
const store = new Vuex.Store({
|
||||
modules: {
|
||||
//封装的存放state下count的方法
|
||||
app: {
|
||||
// namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
}
|
||||
})
|
||||
export default store
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
* */
|
||||
|
||||
|
||||
import Vuex from 'vuex'
|
||||
|
||||
export default (Vue) => {
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = require("./store")
|
||||
return {
|
||||
name : "store",
|
||||
value: store.default
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import Vuex from 'vuex'
|
||||
|
||||
const state = {
|
||||
count: 1
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
|
||||
SET_ADD_COUNT : (state) => {
|
||||
state.count++
|
||||
},
|
||||
SET_SUBTRACT_COUNT: (state) => {
|
||||
state.count--
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
// 加
|
||||
add({commit}) {
|
||||
commit('SET_ADD_COUNT')
|
||||
},
|
||||
// 减
|
||||
subtract({commit}) {
|
||||
commit('SET_SUBTRACT_COUNT')
|
||||
}
|
||||
|
||||
}
|
||||
const store = new Vuex.Store({
|
||||
modules: {
|
||||
//封装的存放state下count的方法
|
||||
app: {
|
||||
// namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
}
|
||||
})
|
||||
export default store
|
||||
@@ -0,0 +1,6 @@
|
||||
//文档:https://x-extends.gitee.io/xe-utils/#/
|
||||
const XEUtils = require('xe-utils')
|
||||
|
||||
export default () => {
|
||||
return {name: '$xe', value: XEUtils}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
const path = require('path');
|
||||
const CopyWebpackPlugin = require("copy-webpack-plugin")
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, dir)
|
||||
}
|
||||
module.exports = {
|
||||
runtimeCompiler: true,
|
||||
lintOnSave: true,
|
||||
chainWebpack: (config)=>{
|
||||
config.resolve.alias
|
||||
.set('@', resolve('src'))
|
||||
.set('components',resolve('src/components'))
|
||||
.set('utils',resolve('src/utils'))
|
||||
.set('assets',resolve('src/assets'))
|
||||
// .set('static',resolve('src/static'))
|
||||
},
|
||||
pluginOptions: {
|
||||
"style-resources-loader": {
|
||||
preProcessor: "less",
|
||||
// patterns: [path.resolve(__dirname, "src/assets/global.less")]
|
||||
},
|
||||
svg: {
|
||||
inline: {}, // Pass options to vue-svg-loader
|
||||
data: {}, // Pass options to url-loader
|
||||
sprite: {}, // Pass options to svg-sprite-loader
|
||||
external: {} // Pass options to file-loader
|
||||
}
|
||||
},
|
||||
configureWebpack: {
|
||||
// plugins: [
|
||||
// new CopyWebpackPlugin({
|
||||
// patterns:[{
|
||||
// from: "./src/static",
|
||||
// to: 'static'
|
||||
// }]
|
||||
// })
|
||||
// ]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user