初始化
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