weixin_42213903的博客

文章目录上一章节全局面包屑导航开发(二)完整代码下一章节上一章节Vue-cli实战项目14全局面包屑导航开发全局面包屑导航开发(二)添加本地存储，在刷新仍保持在原来页面。第一步、将当前顶部Index和侧边index保存到本地第二步、在刷新后，执行初始化操作，调用_initNavBar方法将本地保存的顶部Index和侧边index重新加载完整代码<template>...

文章目录上一章节面包屑导航基本实现通过路由数据生成完整代码下一章节上一章节Vue-cli实战项目13 分离全局配置面包屑导航使用Element 的 Breadcrumb 面包屑 组件来实现。显示当前页面的路径，快速返回之前的任意页面。Breadcrumb 面包屑API基本实现<el-breadcrumb separator-class="el-icon-arrow-righ...

文章目录上一章节分离全局配置完整代码下一章节上一章节Vue-cli实战项目12 侧边导航开发（二）循环和属性计算器分离全局配置第一步、创建config.js文件scriptexport default{ logo:"UNI-ADMIN-SILAS"}第二步、在main.js中引入全局变量第三步，使用变量完整代码layout.js<template> ...

文章目录上一章节循环自动生成侧边菜单属性计算器完整代码下一章节上一章节Vue-cli实战项目11 顶部导航开发（二）循环和过滤器循环自动生成侧边菜单属性计算器完整代码<template> <div> <el-container style="position: absolute;left: 0;top: 0;bottom: 0;right: 0...

文章目录上一章节循环自动生成顶部菜单filter和封装filter完整代码下一章节上一章节Vue-cli实战项目10侧边导航开发循环自动生成顶部菜单循环自动生成顶部菜单<el-menu-item :index="index|numToString" v-for="(item,index) in navBars.list" :key="index"> {{item.n...

文章目录上一章节侧边导航基本实现完整代码下一章节上一章节Vue-cli实战项目9 顶部导航栏的实现侧边导航使用Element 的 NavMenu 导航菜单组件来实现NavMenu 导航菜单基本实现<!-- 侧边布局 --> <el-aside width="200px"> <el-menu default-active="2" @sele...

文章目录上一章节顶部导航栏的实现基本实现调整头像完整代码下一章节上一章节Vue-cli实战项目8 主布局的实现顶部导航栏的实现使用Element 的 NavMenu 导航菜单组件来实现NavMenu 导航菜单基本实现调整水平布局 class=“d-flex”居中 class=“align-items-center”mb-0 = margin-bottom：0mr-auto ...

文章目录上一章节主布局的实现基本实现左侧，实现滚动美化滚动条完整代码下一章节上一章节Vue-cli实战项目7 提交表单并且进行表单验证主布局的实现基本实现添加布局组件 <el-container> <el-header>Header</el-header> <el-container> <el-aside widt...

文章目录上一章节提交表单并且进行表单验证完整代码下一章节上一章节Vue-cli实战项目6 表单验证功能提交表单并且进行表单验证第一步、绑定验证表单，并且登陆按钮绑定点击事件第二步、实现submit方法完整代码<template> <div class="container"> <div class="row"> <div cl...

文章目录上一章节表单验证功能完整代码下一章节上一章节Vue-cli实战项目6 登陆页实现表单验证功能使用Element的表单组件的验证功能Element表单API第一步添加规则第二步绑定规则组件第三步、绑定错误信息输出位置完整代码<template> <div class="container"> <div class="row"&gt...

文章目录布局组件完整代码Vue-cli实战项目5 vue-route的再次封装布局使用了Bootstrap的网格布局Bootstrap的网格布局API组件Bootstrap卡片Element表单完整代码<template> <div class="container"> <div class="row"> <div cla...

vue-routeVue-cli实战项目4 vue-router的封装封装path和name对nmae完整代码let routes = [ { path: '/', name: 'layout', redirect:{name:'index'},//定向到首页 //component: ()=>import('../../views/layout...

routerVue-cli实战项目3 vue-router的安装和基本使用封装router当页面过多时，router.js会非常繁杂不友好，所以要对路由进行封装第一步创建common/config/router.jslet routes = [ { path: '/', name: 'layout', component: ()=>import('../.....

安装第一步npm install vue-router --save第二步src目录下新建router.jsimport Vue from "vue"import Router from "vue-router"Vue.use(Router)export default new Router({ routes:[]})第三步在main.js中引入router.js...

文章目录安装vue创建vue项目vue ui管理项目导入项目仪表盘关闭错误提示安装vue安装vue脚手架npm install -g @vue/cli配置vue环境变量查看VUE版本vue -V创建vue项目创建一个项目vue create vue-el-admin进入项目根目录cd vue-el-admin运行项目npm run server启动完成...