【前端】VUE3.2学习简易框架

0. 学习视频

• Vue3.2后台管理系统
• 【前端】VUE3.2学习详细版
• 未完

1. vue 3.2框架

• cmd
• vue ui
• sass(with dart-sass)

2. elementplus

Element Plus

• npm install element-plus --save
  • npm i element-plus@1.3.0-beta.5 【降低版本】
• 按需导入 npm install -D unplugin-vue-components unplugin-auto-import
  • vue.config.js
  • Webpack
    

3. 初始化项目

• main.js
  • 导入相关css文件
  • import ‘@/styles/index.scss’
• SVG的全局布置
• ICON图标
• vue.config.js
  • 代理模式

配置登录路由

path: '/login',
name: 'Login',
component: () => import('../views/login')

4. 接口处理api

登录接口

export const login = (data) => {
  return request({
    url: '/login',
    method: 'POST',
    data
  })
}

request.js

• import axios from ‘axios’

npm install axios --save // 下载

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

• 请求拦截器

  • service.interceptors.request.use()
  • 存储token config.headers.Authorization = localStorage.getItem(‘token’)
  • 路由守卫
  • 设置需要登陆后才能访问页面
  • permission 设置白名单
    

• 响应拦截器

模式

• 开发模式 .env.production
  • ENV = ‘production’ VUE_APP_BASE_API = ‘/prod-api’
• 生产模式 .env.development
  • ENV = ‘development’ VUE_APP_BASE_API = ‘/api’
    

vuex

• state
  • 利用 localStorage 必要的信息
• mutations

登录页面处理

• 登录点击事件 handleLogin()

const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      store.dispatch('app/login', form.value)
    } else {
      return false
    }})}

vuex中处理登录信息action login({ commit }, userInfo) { } ,
如果成功即调用mutations中的setToken方法保存token

5. 分页

queryForm.pagenum 跳转到第几页
queryForm.pagesize 每一页展示的数量
: total

• handleCurrentChange(pageNum) 【自动获取新页数】
  • queryForm.value.pagenum = pageNum;
  • 每次获取新的数据需要刷新 initGetUsersList();
• handleSizeChange(pageSize)【自动获取新每页条数】
  • queryForm.value.pagenum = 1;
    queryForm.value.pagesize = pageSize;
  • 每次获取新的数据需要刷新 initGetUsersList();

6. Main

• 信息展示
  • el-table 表格展示
  • initGetUsersList(); vue3.2数据加载
• 对话框【父子组件】
  • 增
  • 改
  • 点击事件 显示对话框handleDialogValue
• 删除
• 查询

<el-input v-model="queryForm.query"></el-input>

initGetUsersList //每次调用这个函数

const queryForm = ref({
  query: "",
  pagenum: 1,
  pagesize: 2,
}); // 分页参数+查询参数

const res = await getUser(queryForm.value);

7. Layout页面布置

Header

• 引导功能

npm install driver.js

• 全屏功能

npm install screenfull

npm i screenfull@5 【降低版本】

• 菜单伸缩功能

  • 菜单页面获取值 store.getters.siderType
  • 伸缩点击事件 const toggleClick = () => {
    store.commit(‘app/changeSiderType’)
    }

• 面包屑导航栏

el-breadcrumb

• 头像
  • 退出点击事件 logout
  • vuex中处理退出信息action login({ logout }, userInfo) { },

const logout = () => {
  store.dispatch('app/logout')
}

Menu

CSS

功能

• 国际化操作

npm i vue-i18n@next

版本不够 降级下载【npm install vue-i18n@8 --save】

• 时间设置【Main】

npm install dayjs --save

布置 el-container

• el-aside < Menu/>
• el-header < Headers/>
• el-main < router-view />