views
home
<template>
<div class="home">
<div class="base-container">
<div class="side-left">
<div class="logo">
<a href="/">
<img
src="../assets/images/logo.png"
alt=""
>
<h1>Vue Element Admin</h1>
</a>
</div>
<div class="nav-left">
</div>
</div>
<div class="main">
<div class="main-top">
<div>
面包屑
</div>
<div>user</div>
</div>
<div class="main-view">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.base-container {
display: flex;
.logo {
height: 50px;
line-height: 50px;
background: #2b2f3a;
a {
text-decoration: none;
display: flex;
img {
height: 50px;
padding: 10px;
box-sizing: border-box;
}
h1 {
color: #fff;
font-size: 14px;
}
}
}
.side-left {
width: 200px;
color: rgb(191, 203, 217);
background-color: rgb(48, 65, 86);
.nav-left {
height: calc(100vh - 50px);
}
}
.main {
width: calc(100vw - 200px);
background-color: #f0f2f5;
}
.main-top {
height: 50px;
padding: 0 20px;
line-height: 50px;
background-color: #fff;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.main-view {
padding: 10px;
height: calc(100vh - 50px);
box-sizing: border-box;
}
}
</style>
login
<template>
<div class="login">
<el-card
class="login-container"
shadow="always"
:body-style="{ padding: '20px' }"
>
<div slot="header">
<span>
请输入账号
</span>
</div>
<!-- card body -->
<el-form
:model="user"
ref="loginRef"
:rules="rules"
label-width="80px"
:inline="false"
size="normal"
>
<el-form-item
label="用户名"
prop="username"
>
<el-input v-model="user.username"></el-input>
</el-form-item>
<el-form-item
label="密码"
prop="password"
>
<el-input
type="password"
v-model="user.password"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="login"
:loading="isLoading"
>确认</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
user: {
username: 'admin',
password: 'admin'
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
login() {
this.isLoading = true
this.$refs.loginRef.validate((valid) => {
if (valid) {
// alert('submit!')
this.$http.Login({ username: this.user.username.trim(), password: this.user.password.trim() }).then(res => {
console.log(res)
this.isLoading = false
this.$storage.setItem('userinfo', res.data.data)
this.$storage.setItem('token', res.data.data.token)
this.$router.push('/')
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
.login {
.login-container {
width: 25rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style>
pagenofound
<template>
<div>
404
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
welcome
<template>
<div class="welcome">
欢迎进入xxx后台管理系统
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.welcome {
height: 100%;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
}
</style>
app.vue
<template>
<div class="app">
app
<el-button type="primary">按钮</el-button>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
image.png
main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import './styles.scss'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
style.scss
/* theme color */
$--color-primary: #409eff;
/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
.env.staging
NODE_ENV = development
ENV = 'staging'
VUE_APP_BASE_API = 'https://www.fastmock.site/mock/5afbe58d93f8657ec74c86c70ddaf38c/api'
