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 = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: 'css'
}]
]
}
package.json
......@@ -3,11 +3,16 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve --mode dev",
"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": {
"ant-design-vue": "^2.0.0-rc.1",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
......@@ -22,6 +27,7 @@
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.1",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
......
src/App.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div id="app-body">
<Header></Header>
<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>
<router-view/>
</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">
@nav-width: 208px;
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
font-family: SourceHanSansSC-regular;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
min-width: 1440px;
height: 100%;
#app-body {
width: 100%;
height: 100%;
overflow-x: scroll;
.main-wrap {
width: 100%;
height: calc(100% - 53px);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
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'
import App from './App.vue'
import router from './router'
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 Home from '../views/Home.vue'
import App from '../App.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
name: 'App',
component: App,
redirect: '/traineeManage'
},
{
path: '/about',
name: 'About',
path: '/traineeManage',
name: 'TraineeManage',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// 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 state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
state,
mutations,
actions,
getters
})
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>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<div class="right-body">
<div class="right-main">
<div class="breadcrumb">
<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>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Footer from '../components/Footer'
export default {
name: 'Home',
props: {
root: {
type: String,
required: true
}
},
components: {
HelloWorld
Footer
}
}
</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