我屬於完全的前端小白，安裝npm install sass-loader --save
當然還需要node-sass等
1 Assets和static的區別
assets中靜態檔案載入和static靜態檔案載入方式不一樣，如下面程式碼所示，static目錄中可以加載出來
詳細可參見vue2.0 資原始檔assets和static的區別，雖然我不是看的非常明白。

<style lang="scss">
.login-container{
    background: url("[email protected]/assets/images/login-bg.jpg") no-repeat center fixed;
    // background: url("/static/login-bg.jpg") no-repeat center fixed;
    background-size: cover;
}
</style>
 

2 登入頁面

<template>
  <div class="bg-login">
    <div class="login-header container">
	</div>
      <div class="middle-box loginscreen bg-white container">
            <div class="login-top"></div>
            <div class="login-title text-center">
                <h1>使用者登入</h1>
            </div>
            <el-form inline-message :model="loginForm" :rules="loginRules" ref="loginForm">
                <el-form-item prop="username">
                    <el-input status-icon prefix-icon="fa fa-user" v-model="loginForm.username" placeholder="請輸入使用者名稱" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="fa fa-lock" :type="passwordType" @keyup.enter.native="doLogin"
                        v-model="loginForm.password" placeholder="請輸入密碼" auto-complete="on">
                    </el-input>
                    <span class="show-pwd" :style="eyeStatus" @click="showPwd"><i class="icon iconfont icon-eye"></i></span>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" :loading="loading" @click.native.prevent="doLogin">登入</el-button>
                </el-form-item>
            </el-form>
      </div>
  </div>
</template>
<script>
export default {
  name:'login',
  data() {
      return {
            loginForm:{
                username:'',
                password:''
            },
            loginRules:{
                username:[{require:true, message:'使用者名稱不能為空',trigger:'blur'},{min:5, max:20, message:'長度在 5 到 20 個字元', trigger: 'blur'}],
                password:[{require:true,trigger:'blur'},{min:6,message:'密碼長度必須6位以上',trigger:'blur'}]
            },
            loading:false,
            passwordType:'password',
            eyeStatus:''
      }
  },
  methods: {
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
                this.eyeStatus = 'color:#1296db'
            } else {
                this.passwordType = 'password'
                this.eyeStatus = ''
            }
        },
        doLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid){
                    this.loading = true
                } else{
                    return false
                }
            })
        }
  }
}
</script>
<style lang="scss" >
$dark_gray:#889aa4;
body{
    background: url("
 
[email protected]/assets/images/login-bg.jpg") no-repeat center fixed;
    background-size: cover;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.bg-white{
    background-color: #ffffff;
    opacity: 0.8;
}
.middle-box{
    max-width: 400px;
    z-index: 100;
    margin: 0 auto;
    padding-bottom: 10px;
}
.loginscreen .middle-box{
    width: 300px;
}
.login-top{
    background-color: #3b3127;
    height: 6px;
}
.login-title{
	height:130px;
	padding:30px;
	font-weight:bold;
}
.login-header{
	height:265px;
}
.login-logo{
	margin-top:40px;
}
.login-logo-zh,
.login-logo-en{
	font-weight:bold;
	color:#3b3127;
}
.login-logo-zh{
	font-size:45px;
	font-family:"宋體";
}
.login-logo-en{
	font-size:21px;
	font-family:"Helvetica";
}
.middle-box{
    .el-input {
        display: inline-block;
    }
    .el-button {
        display: inline-block;
        width:100%;
    }
    .el-input__inner {
        text-align: center;
    }
}
.show-pwd {
    position: absolute;
    right: 10px;
    top: 2px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
}
</style>
 

這裡iconfont是自定義的圖示，來源於http://www.iconfont.cn。匯出樣式