1安裝less_loader依賴

2安裝less

3目錄結構

router.js

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue'Vue.use(Router)export default new Router({routes:[{path:'/',redirect:'/login'},{path:'/login',component:Login}] })

login.vue

<template><div class="login_container"><div class="login_box"></div> </div></template><script> export default{} </script><style lang="less" scoped> .login_container {background-color: #2b4b6b;height: 100%; } .login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff; } </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js'Vue.config.productionTip = false //導入全局樣式 import './assets/css/global.css' new Vue({router,render: h => h(App) }).$mount('#app')

global.css

/* 全局樣式 */ html, body, #app {height: 100%;margin: 0;padding: 0;}

運行結果

總結

以上是生活随笔為你收集整理的前端学习（1861）vue之电商管理系统电商系统之设置背景色并在中央绘制登录盒子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。