Skip to content

肖文锋 / clm-admin

Go to a project
Commit dc9b5e0d by xiaowenfeng
Options

1、clm-admin重构

parent b09a308b
Inline Side-by-side
Showing with 170 additions and 110 deletions
babel.config.js
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: 'css'
}]
] ]
} }
package.json
...@@ -3,11 +3,16 @@ ...@@ -3,11 +3,16 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vue-cli-service serve --mode dev",
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "lint": "vue-cli-service lint",
"lint": "vue-cli-service lint" "build-dev": "vue-cli-service build --mode dev",
"build-pro": "vue-cli-service build --mode pro",
"build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"ant-design-vue": "^2.0.0-rc.1",
"axios": "^0.21.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
...@@ -22,6 +27,7 @@ ...@@ -22,6 +27,7 @@
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-standard": "^5.1.2", "@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.1",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2", "eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
......
src/App.vue
<template> <template>
<div id="nav"> <div id="app-body">
<router-link to="/">Home</router-link> | <Header></Header>
<router-link to="/about">About</router-link> <div class="main-wrap">
<div class="left-menu-wrap">
<LeftNav :company="company"></LeftNav>
</div>
<div class="right-wrap">
<Home :root="company"></Home>
</div>
</div>
</div> </div>
<router-view/>
</template> </template>
<script>
import Header from './components/Header'
import LeftNav from './components/LeftNav'
import Home from './views/Home'
export default {
data () {
return {
company: '深圳企大科技有限公司'
}
},
components: {
Header,
LeftNav,
Home
}
}
</script>
<style lang="less"> <style lang="less">
@nav-width: 208px;
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: SourceHanSansSC-regular;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; min-width: 1440px;
color: #2c3e50; height: 100%;
} #app-body {
width: 100%;
#nav { height: 100%;
padding: 30px; overflow-x: scroll;
.main-wrap {
a { width: 100%;
font-weight: bold; height: calc(100% - 53px);
color: #2c3e50; display: flex;
flex-direction: row;
&.router-link-exact-active { flex-wrap: nowrap;
color: #42b983; justify-content: flex-start;
.left-menu-wrap {
width: @nav-width;
height: 100%;
background: #D2D2D2 100%;
}
.right-wrap{
width: calc(100% - @nav-width);
height: 100%;
}
} }
} }
} }
......
src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/main.js
...@@ -2,5 +2,23 @@ import { createApp } from 'vue' ...@@ -2,5 +2,23 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import http from './service/http'
import { Button, Popover, Menu, Breadcrumb } from 'ant-design-vue'
const env = process.env
console.log(env)
createApp(App).use(store).use(router).mount('#app') // router.beforeEach((to, from, next) => {
// /* 必须调用 `next` */
// console.log(to)
// console.log(from)
// next()
// })
const app = createApp(App)
app.config.globalProperties.$http = http
app.use(Button)
app.use(Popover)
app.use(Menu)
app.use(Breadcrumb)
app.use(store).use(router).mount('#app')
src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue' import App from '../App.vue'
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'App',
component: Home component: App,
redirect: '/traineeManage'
}, },
{ {
path: '/about', path: '/traineeManage',
name: 'About', name: 'TraineeManage',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') component: () => import(/* webpackChunkName: "traineeManage" */ '../views/TraineeManage.vue')
},
{
path: '/admin',
name: 'Admin',
component: () => import('../views/Admin.vue')
} }
] ]
......
src/store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
export default createStore({ export default createStore({
state: { state,
}, mutations,
mutations: { actions,
}, getters
actions: {
},
modules: {
}
}) })
src/views/About.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue
<template> <template>
<div class="home"> <div class="right-body">
<img alt="Vue logo" src="../assets/logo.png"> <div class="right-main">
<HelloWorld msg="Welcome to Your Vue.js App"/> <div class="breadcrumb">
</div> <a-breadcrumb separator=">>">
<a-breadcrumb-item>{{root}}</a-breadcrumb-item>
<a-breadcrumb-item href="">
组织管理
</a-breadcrumb-item>
<a-breadcrumb-item href="">
学员管理
</a-breadcrumb-item>
</a-breadcrumb>
</div>
<div class="right-main-body">
<router-view></router-view>
</div>
</div>
<Footer></Footer>
</div>
</template> </template>
<script> <script>
// @ is an alias to /src import Footer from '../components/Footer'
import HelloWorld from '@/components/HelloWorld.vue'
export default { export default {
name: 'Home', props: {
root: {
type: String,
required: true
}
},
components: { components: {
HelloWorld Footer
} }
} }
</script> </script>
<style lang="less" scoped>
@footer-height: 43px;
@right-main-padding-top: 18px;
@right-main-padding-right: 40px;
@right-main-padding-bottom: 12px;
@right-main-padding-left: 20px;
@breadcrumb-height: 18px;
@breadcrumb-margin-bottom: 12px;
@right-main-body-height: @breadcrumb-height + @breadcrumb-margin-bottom;
.right-body {
width: 100%;
height: 100%;
background: #F9F9F9 100%;
.right-main {
width: 100%;
height: calc(100% - @footer-height);
box-sizing: border-box;
padding: @right-main-padding-top @right-main-padding-right @right-main-padding-bottom @right-main-padding-left;
.breadcrumb {
height: @breadcrumb-height;
margin-bottom: 12px;
::v-deep .ant-breadcrumb {
font-size: 12px !important;
}
}
.right-main-body {
width: 100%;
height: calc(100% - @right-main-body-height);
// background: red;
}
}
::v-deep .footer-wrap {
width: 100%;
height: @footer-height;
background: blue;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment