Vue实战项目：电商管理系统（Element-UI） （1-20）记录第一天 （一）登录页面绘制

目录

 

一.页面目录结构

二，项目入口main.js, 主要引入全局样式，配置路由axios

三.路由信息 router/index.js

四..自定义样式信息assest/css/global.css

五,登录页面components/Login.vue

六.引入组件 plugins/element.js

七，页面效果

---

一.页面目录结构

二，项目入口main.js, 主要引入全局样式，配置路由axios

/* eslint-disable */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局样式
import './assets/css/global.css'
// 导入axios
import axios from 'axios'
axios.defaults.baseURL="http://localhost:8083/"
Vue.prototype.$http=axios
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

三.路由信息 router/index.js

/* eslint-disable */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login'
import Home from '../components/Home'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

//路由导航控制权限
router.beforeEach((to,from,next)=>{
  //如果用户访问登录页面，直接放行
  if(to.path==='/login') return next();
  //从session中获取保存的token值
  const tokenStr=window.sessionStorage.getItem('token')
  if(!tokenStr) return next("/login")
  next()
})


export default router

四..自定义样式信息assest/css/global.css

html, body, #app{
height: 100%;
margin: 0;
padding: 0;

}

五,登录页面components/Login.vue

六.引入组件 plugins/element.js

/* eslint-disable */
import Vue from 'vue'
import { Button } from 'element-ui'
import { Form, FormItem} from 'element-ui'
import {Input} from 'element-ui'
//导入消息提示
import { Message } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message=Message

 

七，页面效果