Vue3+Element Plus+TS开发企业管理后台(二)

最新推荐文章于 2024-06-14 08:38:04 发布

原创

最新推荐文章于 2024-06-14 08:38:04 发布 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #echarts

使用vite初始化项目

确保你的开发环境中已经安装了Node.js，而且有npm，yarn等包管理工具，然后可以按照vite官方提供的方式初始化项目：

yarn create vite

跟随提示选择即可：
在这里插入图片描述

或者可以直接克隆下面的仓库
https://github.com/iicoom/vat

安装项目依赖

➜  vat yarn add vue-router element-plus echarts nprogress

新增router、layouts目录

在src目录下新增router用于配制项目路由，layouts用于存放项目的布局组建。

在layouts中新增login.vue文件用来处理登录页面的样式和登录、注册校验等逻辑。

<template>
  <div class="login-container">
    <div class="login-form" v-if="mode === 'login'">
      <h1>Hello!</h1>
      <h2>欢迎来到 Vue Admin TS!</h2>
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="" prop="name">
          <el-input v-model="form.name" :prefix-icon="User" size="large" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="form.password" :prefix-icon="Lock" size="large" placeholder="密码" show-password clearable />
        </el-form-item>
        <el-button :loading="submitting" :loading-icon="Eleme" size="large" type="primary" style="width: 50%"
          @click="c