vue + element-plus项目做管理系统常用的组件，以及一些方便开发的设置

1.简化路径

//vite.consfig.ts
import { defineConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue' 
import path from 'path'
export default defineConfig(({ command }: ConfigEnv) => {
  return {
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
  }
})

       

//tsconfig.json 
"compilerOptions": {
    "baseUrl": "./", 
    "paths": {  
      "@/*": ["src/*"]
    },
    "esModuleInterop": true	 //可配可不配，它用于简化 TypeScript 项目中不同模块系统之间的导入和    
                               导出操作，使代码更加清晰和兼容。
  },

使用

export const allRoutes = [
    {
        path:'/login',
        name:'登录',
        component:()=> import('@/views/login/index.vue'),


    },
]

//若没进行 @ 的配置

export const allRoutes = [
    {
        path:'/login',
        name:'登录',
        component:()=> import('../views/login/index.vue'),


    },
]

虽然上述代码不是很能看出配置 @ 的好处，当是当你做一个比较大项目，一个文件夹套了很多文件夹时你就得   ../../xx 非常麻烦，建议做项目的时候配上

 2.layout布局和el-form做登录静态页面

        通过row和col组合，进行布局

        一下我做的简易的登录静态页面，此包含element-plus提供的图表组件，以及一些其他的属性，若由疑问可以评论或查询element-plus官网

 <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="formY" :model="formData" :rules="rules" ref="loginFormRef">
                    <div class="title" style="margin-top: 5vh;">
                        <h1>Hello</h1>
                        <h2>欢迎来到创智绩效管理系统</h2>
                    </div>
                    <el-form-item label="账号" prop="username">
                        <el-input type="text" placeholder="请输入账号" style="max-width:350px;min-width: 350px;"
                            prefix-icon="User" v-model="formData.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" placeholder="请输入密码" style="max-width:350px;min-width: 350px;"
                            prefix-icon="Lock" v-model="formData.password" show-password> </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :lading="loading" class="btn" @click="login">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

       原本想一个页面一个页面更新这篇博客的，后来想了想，感觉没必要，费时费力，读者的观看体验也不佳，所以我决定直接把这个项目开源，感兴趣的可以下载下来学习或者改善一下，它可以作为一个管理系统的模板，以下是该项目的地址：

        风风/czjx (gitee.com)