NanChen的博客

暗黑主题设置

Element-plus图片上传功能

Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建（内含完整架构）

<el-button type="success" size="mini" @click="exportModal = true">导出数据</el-button><el-dialog title="导出数据" :visible.sync="exportModal" width="40%"> <el-form :model="exportForm" ref="ruleForm"> <el-form-item label="订单.

router页面import Vue from "vue";import VueRouter from "vue-router";import Home from "../views/Home.vue";import NotFound from "../views/NotFound.vue";import store from "../store/index.js";Vue.use(VueRouter);const one = { path: "/menu/one", compo.

需要实现以下功能：两个用户，如果在用户页面中粘贴管理员页面的角色管理会出现404页面，视为不允许进入首先把角色管理单独拿出来作为动态路由router 页面const userRoute ={ path: 'role', name: 'role', meta:{title:"角色管理"}, component:() => import('../views/Role.vue')}定义一个路径用来接收这个动态路由const userR ={ '/role':userRou

在router中创建一个导航守卫// 导航守卫通过login页面判断有无token值，没有就一直在login页面router.beforeEach((to,from,next)=>{ if (to.path== '/login') { next() }else { let token = window.sessionStorage.getItem('token') if (!token) { next('/login') }else{ next() } }

<top-bar @submitAction="submitAction"></top-bar>methods:{ // 添加——转TopBar.vue页面 submitAction(rowData){ this.$api.addList({rowData}).then(res=>{ this.tableData.unshift(res.data) }) },}TopBar.vue页面 ...

main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import './plugins/element.js'import Api from './api/index.js'import './mock'import { MessageBox, Message } from 'element-ui'Vue.co...

目前原本数据结构const users = [{ id: 1, username: 'normal', password: 'normal', token: 'abcdefghijklmnopqrstuvwxyz', leftMenus: [{ title: '用户管理', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit',

在common/config/router.js中的layout写子组件路由之前：const routes = [ { path: '/', name: 'layout', /* component: () => import('@/views/layout.vue') */ component:'layout', }, { // 这里就不用写path以及name，下面的函数已经给封装好了 /

续上01layout.vue<template> <div class="home"> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> &l

本章开始将基于element-ui+vue2+bootstrap4开发后台管理系统准备工作：1、安装脚手架Vue——安装@vue/cli(Vue脚手架)的三种方式_nanchen的博客-CSDN博客2、使用vue ui安装四个插件：vuex，router，axios，element-ui调出脚手架的控制台，输入：vue ui3、引用bootstrap4官方网址：bootstrap4这里可以通过npm或者link的方式进行引用，这里使用link引入打开脚手架...

不显示头部:showHeader="false"如果是严格模式不能用驼峰命名，则应该是:show-header="false"设置mokejs中的字体颜色并渲染到element-ui表格中:cell-style="cellStyle"写在methods中 cellStyle({ row, column, rowIndex, columnIndex }) { if (column.property === 'title') { ret...

如果你想把导航菜单设置为一个页面，并且内容也设置为一个页面，像下图这种可以参考一下官网给出的标签用于布局的容器组件，方便快速搭建页面的基本结构：<el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。<el-main>：主要区域容器。<el-footer>：底栏容器。没发直接将一个div分在两个页面中给其设置长度...

最详细的后台管理系统布局以及成品代码

element-ui-admin安装方法，可以从官网查看npm报错：npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2017-11-20T09_43_06_459Z-debug.log之前尝试了安装这个模板出现了一些问题，这里说一下。很多人安装这个的时候

总结一下运行此项目需要安装的插件：一、router二、vuex三、element ui前三个可以使用vue ui 进行安装四、安装less ：npm install less -–save-dev五、安装less-loader(低版本的less-loader)：npm install less-loader@5.0.0 --save六、安装axios：npm install axios --save七、core-js版本：npm i core-js@3.6.4八、...

<template> <div id="app"> <div id="admin"> <div class="pos" v-loading="loading"> <h1 class="adminh1">用户登录</h1> <el-form :model="ruleForm" status-icon :rules=".

前端后台管理系统的基本实现