vue+elementUI后台系统（第四章：登录页面及Scss/Sass）

目录

目录​​​​​

前言

一、安装SCSS

1.安装node-sass

2.安装sass-loader

3.配置sass

二、新建登录页面

1.新建路由

2.新建登录页面

总结

---

​​​​前言

随着框架的流行，越来越多的开发者喜欢用框架开发项目，以vue、react等居主流，国内比较常用的就是vue进行项目的搭建，本系列文章主要使用vue+webpack进行项目的搭建，其中使用了elementUI进行了扩展，增加到后台系统的布局和路由相关知识，有兴趣就往下看吧~

---

一、安装SCSS

项目里面的css我们使用scss（scss的用法以及优势详解请看：SCSS用法及详解），所以需要先安装依赖。又因为scss基于node-sass运行，所以我们需要先装node-sass 。

1.安装node-sass

执行命令：npm install node-sass --save-dev

然后你可能会看到以下报错： 

这时候我们就切换一下数据源至淘宝镜像，执行下面的命令：

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

此时再执行：npm install node-sass --save-dev

这时候就会安装成功了

2.安装sass-loader

执行命令：npm install sass-loader --save-dev

3.配置sass

接下来我们开始配置sass,找到下图中的文件，配置代码：

 图中的代码如下：

 {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },

 到这里scss就配置完成了。

那我们怎样使用呢？

首先，每个页面都要写成这样，表示使用scss：

 此时执行命令：npm run dev ，就能运行了。

你也可能会发生以下报错：

 原因：这表示你的sass-loader版本太高了，所以我们需要降低版本就可以了

解决方法：

        首先卸载之前的sass-loader,执行命令：npm uninstall sass-loader

        再安装低版本的，执行命令：npm install sass-loader@7.3.1 --save-dev

最后再运行项目：npm run dev，就可以正常运行了。

二、新建登录页面

1.新建路由

在路由中添加登录（/login）的路由（路由详解，请看：vue+elementUI后台系统（路由的引入与首页创建）：

import Vue from 'vue'
import Router from 'vue-router' 
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'name',
      component: () => import('@/views/home'),
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login')
    },
   ]
})

2.新建登录页面

首先我们在view/login/index.vue，这里存放登录界面得代码。

我的登录页面长这样：

 所以我的代码如下：

<template>
  <div class="login_contanier">
    <div class="login_background">
      <h2 class="text_center color_pink">登录</h2>
      <el-form :model="ruleForm"
               status-icon
               :rules="rules"
               ref="ruleForm"
               class="demo-ruleForm">
        <el-form-item label="账号"
                      prop="account">
          <el-input type="text"
                    v-model="ruleForm.account"
                    placeholder="请输入账号名"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input type="password"
                    placeholder="请输入密码"
                    v-model="ruleForm.password"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="text_center">
          <el-button class="purple_btn"
                     @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  components: {},
  data() {
    return {
      ruleForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  // mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          localStorage.setItem('token', JSON.stringify(this.ruleForm))
          this.$router.push('/home')
        } else {
          this.$message.error('密码或账号错误，请检查！')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login_contanier {
  width: 100%;
  min-height: calc(100vh);
  background: rgb(179, 162, 199);
  position: relative;
  .login_background {
    width: 320px;
    padding: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: white;
    .text_center {
      text-align: center;
    }
    .color_pink {
      color: rgb(96, 74, 123);
      text-shadow: rgb(179, 162, 199);
    }
    .purple_btn {
      color: #fff;
      background-color: rgb(96, 74, 123);
      border-color: rgb(96, 74, 123);
    }
  }
}
</style>

---

总结

以上就是今天要讲的内容，本文介绍了scss的安装及使用以及登录页面的撰写

上一章：vue+elementUI后台系统（第三章：路由的引入与首页创建）

下一章：vue+elementUI后台系统（第五章：权限设置）