目录
前言
随着框架的流行,越来越多的开发者喜欢用框架开发项目,以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的安装及使用以及登录页面的撰写