project

后台管理

页面搭建+布局
vue3快速上手:https://cn.vuejs.org/guide/quick-start.html

• 创建vue项目

  • 
    代码:

    //创建项目
    npm init vue@lates
    //启动项目
    > cd <your-project-name>
    > npm install
    > npm run dev
    

    
    配置成功
    

真正的入口 在index.html
vite.config.js 可以配置端口号 不推荐5173 前段用5 后端建议用别的开头 这里用7000

//安装element-plus (在vue项目的端口中装)
npm install element-plus --save
yarn add element-plus
pnpm install element-plus

导入配置到main.js中

import App from './App.vue'
import router from './router'

app.use(ElementPlus)

配置快捷启动 不用命令符启动了


样式

路由入口 这里同一风格与下面写法同样

主题与边界撑开好看一点



text-align: center 居中

//国际化 在main.js 中
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

给最后一个表格中添加两个按钮

跳转到login界面
添加对应图标




添加事件,在登录的时候返回其输入的数据npm i axios -s

npm i pinia-pinia-plugin-persistedstate -s