Vue3+element-plus实现后台管理系统_后台管理系统element-plus框架

背景（未完待续）

 环境：node.js软件 、Vs code、vite、elemnt-plus、windicss(样式框架）

 

第一节课

  1、首先，使用npm 命令构建项目（ vscode安装的插件 vscode中文显示插件   2、高亮提示插件volar   3、vue 3 sni 代码提示）

快速上手 | Vue.js

   a. npm -v 查看node.js 版本

   b.  npm  config get registry   查看注册镜像是不是国内的,如果不是则执行以下命令注册成国内的。

   c.  npm config set registry=https://registry.npmmirror.com  切换成国内镜像

        代理地址淘宝 registry=https://registry.npmmirror.com

   d.  初始化工程  npm init vue@latest shop-admin  -- --template vue

       提示
       cd shop-admin
       npm install
       npm run dev  （启动项目）

    按提示步骤依次运行
    
   e、引入elemnt-plus 插件
      安装: npm install element-plus --save

       main.js引入
       import ElementPlus from 'element-plus'
       import 'element-plus/dist/index.css'
       
       app.use(ElementPlus)

    
    f、引入样式框架windicss工具库
       中文地址：https://cn.windicss.org/

        打开指引--vite 安装
        npm i -D vite-plugin-windicss windicss
      
    g、WindiCSS IntelliSense代码提示插件vs code 里面安装

第二课、vue路由安装

入门 | Vue Router

新建router文件，配置如下代码

然后在main.js中引入

 为了方便查找src目录，在vite.config.js中配置别名。

 在App.vue引入

 第三课 、404页面

在路由中配置 

 第四课、登录页面开发

<template>
    <el-row class="min-h-screen min-w-screen bg-indigo-500">
 
 
        <el-col :lg="16" :md="12" class="login_left_md">
            <div class="flex-col">
                <div>欢迎光临</div>
                <div>此站点是《vue3 + vite实战商城后台开发》视频课程的演示地址</div>
            </div>
        </el-col>
 
        <el-col :lg="8" :md="12" class="login_module">
 
            <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>
            <div class="">
                <span class="h-1 w-16 bg-gray-200"></span>
                <span>账号密码登录</span>
                <span class="h-[1px] w-16 bg-gray-200"></span>
            </div>
 
            <el-form :rules="rules" :model="form" ref="formRef" class="w-[250px]">
 
                <el-form-item prop="username">
                    <!-- 指定校验 prop="username"  -->
                    <el-input v-model="form.username" placeholder="请输入用户名">
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
 
                <!-- 指定校验 prop="password"  -->
                <el-form-item prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" type="password" show-password>
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登 录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
 
    </el-row>
</template>
 
<script setup>
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { login } from '~/api/manager'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
 
 
const router = useRouter()
// do not use same name with ref
const form = reactive({
    username: "",
    password: ""
})
 
// 校验规则
const rules = {
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        },
        {
            min: 3,
            max: 10,
            message: '用户名长度必须为3-10',
            trigger: 'blur'
        }],
    password: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        },
        {
            min: 3,
            max: 10,
            message: '用户名长度必须为3-10',
            trigger: 'blur'
        }
    ]
}
 
const formRef = ref(null)
 
 
// 登录按钮
const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return false
        }
        login(form.username, form.password)
            .then(res => {
                console.log(res.data.data);
 
                // 提示成功
                ElNotification({
                    message: "登录成功",
                    type: 'success',
                    duration: 3000
                })
 
                // 存储token和用户相关信息，下节课讲
 
                // 跳转到后台首页
                router.push("/index")
            })
            .catch(err => {
                ElNotification({
                    message: err.response.data.msg || "请求失败",
                    type: 'error',
                    duration: 3000
                })
            })
    })
 
}
 
</script>
 
<style scoped>
.login_module {
    @apply bg-light-50 flex items-center justify-center flex-col;
}
 
.login_module>div {
    @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
}
 
.login_left_md {
    @apply flex items-center justify-center;
}
 
.login_left_md>div>div:first-child {
    @apply font-bold text-5xl text-light-50 mb-4
}
 
.login_left_md>div>div:last-child {
    @apply text-gray-200 text-sm;
}
</style>

源码地址

https://download.csdn.net/download/shi450561200/87780611