小白学习Vue3之管理系统模板搭建（三）——node-sass安装及登录页面

node-sass安装

安装准备

项目应用node-sass时，必须与node版本对应

node和node-sass版本对应表

Node JS	Supported node-sass version	node module
node17	7.0+	102
node16	6.0+	93
node15	5.0+	88
node14	4.14+	83
node13	4.13+, <5.0+	79
node12	4.12+	72
node11	4.10+ ,<5.0	67
node10	4.9+	64
node8	4.5.3+, <5.0	57
node<8	<5.0	<57

查看自己node版本

npm -v

小白电脑的版本时16.20.0所以安装的node-sass是6.0.+
除了node-sass意外，还需要sass-loader（主要用于将Sass或SCSS文件转换为CSS文件）

部分sass-loader与node-sass版本

sass-loader	node-sass
sass-loader 4.1.1	node-sass 4.3.0
sass-loader 7.0.3	node-sass 4.7.2
sass-loader 7.3.1	node-sass 4.7.2
sass-loader 7.3.1	node-sass 4.14.1
sass-loader 10.0.1	node-sass 6.0.1

安装

安装python

由于node-sass是python编译的，所以需要电脑安装python ,node版本高的安装python3，版本低的安装python2.*
Tips： 安装python不知道版本，可以先直接安装node-sass，安装报错会提示的
从别的地方找的提示，如下图

安装python的方式很多可以百度
推荐安装教程：超详细的Python安装和环境搭建教程

校验python是否安装完成

python

安装node-sass

npm install node-sass@版本号 --save-dev

安装sass-loader

npm install sass-loader@版本号 --save-dev

小白对应的版本

软件	版本号
node	16.20.0
node-sass	^6.0.1
sass-loader	^10.0.0
python	3.10.9

登录页面

路由配置

项目的第一页面一般都是登录页面
在src/router/index.js中

有在前面写过------>小白学习Vue3之管理系统模板搭建（二）——axios&router

在路由跳转，进入src/view/Login.vue页面

登录页面

1. Longin.vue 源码如下

<template>
  <div class="login_calss">
    <el-card class="login_card">
      <el-image class="logo_image" :src="logoImg"></el-image>
      <p class="login_title">登 录</p>
      <p class="login_desc">欢迎登录XXX后台管理系统</p>
      <el-form
        :model="fromData"
        :rules="rules"
        ref="ruleFromRef"
        label-width="80px"
        class="login_form"
      >
        <el-form-item label="账户：" prop="username">
          <el-input v-model="fromData.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            type="password"
            v-model="fromData.password"
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-form>
      <div>
        <el-button
          class="btn-class"
          type="primary"
          @click="onSubmit()"
          :loading="loading"
          >登 录</el-button
        >
        <el-button class="btn-class" @click="resetForm()">重 置</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup name="login">
import logoImg from "../assets/img/logo.png";
import userApi from "../api/user";
//import { reactive, ref, getCurrentInstance } from "vue"; 有自动引入包插件了
import { ElMessage } from "element-plus";

const ruleFromRef = ref();
const fromData = reactive({
  username: "",
  password: "",
});

const loading = ref(false);

const rules = reactive({
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});
const onSubmit = () => {
  if (!ruleFromRef) return;
  loading.value=true
  ruleFromRef.value.validate(async (valid, fields) => {
    if (valid) {
      //   const res = await userApi.login(from);
      //   if (res.data) {
      //     if (res.data.success) {
      //       loading.value=false
      //       跳转到首页或者存储用户信息...
      //     } else {
      //       loading.value=false
      //       ElMessage.error(res.data.message);
      //     }
      //   } else {
      //     return false;
      //   }
    } else {
      loading.value=false
    }
  });
};
const resetForm = () => {
  if (!ruleFromRef) return;
  ruleFromRef.value.resetFields();
};
</script>

<style scoped>
.login_calss {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/bg.jpg");
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100% 100%;
}
.login_card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
  height: 45%;
  border-radius: 10px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
}
.logo_image {
  width: 100px;
  height: 100px;
  margin-top: 5px;
}
.login_title {
  font-size: 25px;
  font-weight: bold;
  margin-top: auto;
}
.login_desc {
  margin-top: auto;
  margin-bottom: 3vh;
  letter-spacing: 8px;
  color: #414646;
}
.login_form {
  background-color: rgba(255, 255, 255, 0.2);
}
.btn-class {
  margin-top: 10px;
  margin-left: 5vh;
}
:deep(.el-input__wrapper) {
  background-color: transparent !important;
}
:deep(.el-form-item) {
  background-color: unset !important;
}
</style>

2. 在/src文件夹下，建立api文件夹，在/src/api/下建立user.js
   user.js 源码如下

import http from '../utils/http/http'

const login = (data) => {
    return http.post("/user/login",data);
}

const getuserList = (data) => {
    return http.get("/user/login",data);
}

const saveuser = (data) => {
    return http.post("/user/login",data);
}

const delUser = (data) => {
    return http.del("/user/login",data);
}

const getUserDetail = (data) => {
    return http.get("/user/login",data);
}

export default {
    login, getuserList, saveuser, delUser, getUserDetail
}

3. 在/src/assets/建立img文件夹，存储登录背景图和登录logo

4. 在App.vue中加入

<router-view/>

结构目录

自动引入插件 ** unplugin-auto-import **

下载unplugin-auto-import

npm install unplugin-auto-import -D

在vite.config.js中加入

import AutoImport from 'unplugin-auto-import/vite'

AutoImport({ 
      imports: [
        'vue',
        'vue-router',
      ]
     })

参考教程：【Vite + Vue3 + TS】unplugin-auto-import自动引入配置及Eslint报错解决