vue 和 elmentui开发后台系统项目总结

布局

  • 当我们用elment el-aside el-header 进行布局 组件和边框是有间距的
  • 当你使用NavMenu 导航菜单 是无法全屏的
  • 当你屏幕缩小时内容会被压缩 设置最小宽度 有滚动条保证内容完整显示
	// 在mian.js global.css (全局的引入)
	html,
	body,
	#app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 1366px;
}
  • 当你自定义组件 绑定自定义事件是监听不到的 需要加.native 修饰符
	<child @click.native='handl'></child>
  • 在使用NavMenu 导航菜单 菜单都是后端返回的数据 通过v-for遍历的 如果后端没有返回icon图标 建立映射表
  mapSection: {
        0:'el-icon-user-solid',
        1:'el-icon-s-tools',
        2: 'el-icon-s-cooperation',
        3: 'el-icon-s-order',
        4: 'el-icon-s-data'
      },

插件化 调用组件

Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

面包屑的封装成一个全局组件

// 方式一
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ two }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ three }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
	// 不同的页面传入不同的值
 <breakclumd two="权限管理" three="角色列表"></breakclumd>

// 方式二、
可以监测 路由的变化 在对应的路由表配置meta字段 添加面包屑的值 
watch:{
	$route(to,from){
		to.meta  
	}
}
  • 对于返回函数返回的结果是 promise 的都可以用 async 和 await 优化
  • 有错误 需要捕获
方式一、
	  function fn2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject(5)
                }, 1000)
            })
        }

        async function fn3() {
            const value = await fn2()
            console.log('value', value)
        }
        fn3().catch((res) => {
            console.log(res);
        })

方式二、
	async function fn1() {
	 //async声明的异步回调函数将返回一个promise
 	 return 1
	}
	function fn2() {
  		return 2
	}
	function fn3() {
		  throw 3 // 抛出异常
		}
	async function fn3() {
		try {
		    	const value = await fn1() // value 1
			    //const value = await fn2() // value 2
			    //const value = await fn3() // 得到失败的结果 3
			    console.log('value', value)
		   } catch (error) {
		    console.log('得到失败的结果', error)
		  }
		}
	fn3()

elment 按需导入

  • 按需引入element-ui 组件 1、开头字母大写 2、横杆的大写 3、以什么… 组件
import Vue from 'vue';
import {
    Row,
    Col,
} from 'element-ui';


[
    Row,
    Col,
].forEach((item, index) => {

    Vue.use(item)

})
  • element-uiMessage 消息提示 的调用 有两种方式

一、

   this.$confirm('您的登录信息已过期,请重新登录', '警告', {
      confirmButtonText: '重新登录',
      cancelButtonText: '留在此页',
      type: 'waring'
    })

二、

import { Message, MessageBox } from 'element-ui';
   MessageBox.confirm('您的登录信息已过期,请重新登录', '警告', {
      confirmButtonText: '重新登录',
      cancelButtonText: '留在此页',
      type: 'waring'
    })
      .then(() => {
     
      })
      .catch(() => {
      
      });

vue 和 elmentui开发后台系统项目总结_第1张图片

用 async 和 await 优化 方式二

elment 侧边栏

vue 和 elmentui开发后台系统项目总结_第2张图片

elment 侧边菜单的处理

<el-menu
      router
      :collapse="getCollapse"
      background-color="#545c64"
      default-active="2"
      class="el-menu-vertical-demo"
    >
    
      <!-- 没有子集 -->
      <el-menu-item index="/about">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>

      <!-- 下面这部分可以用递归来实现 -->
          
          <!-- 有子集 -->
          <!-- <el-submenu index="2-4">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span>导航二级</span>
            </template>
            <el-menu-item index="2-4-1">导航三级</el-menu-item>
            <el-menu-item index="2-4-2">导航三级</el-menu-item>
            <el-menu-item index="2-4-3">导航三级</el-menu-item>
          </el-submenu> -->

          <!--  -->

       
        </template>
      </el-submenu>

页面刷新选中的菜单 还会选中

vue 和 elmentui开发后台系统项目总结_第3张图片

 <el-menu
      router
      // 核心代码
      :default-active="$route.path"
      :collapse="getCollapse"
      background-color="#545c64"
      class="el-menu-vertical-demo"
    >

侧边栏菜单路由表 不需要权限 单独出来

vue 和 elmentui开发后台系统项目总结_第4张图片
vue 和 elmentui开发后台系统项目总结_第5张图片

动态路由的添加

  • 先加载不需要权限部分的页面
  • 公共数据的复用
  • 登录请求 权限 后端返回当前用户权限路由
  • 使用 router.Routes 动态添加路由
  • vuex 数据缓存 结合 本地存储 目的减少 http 请求

权限管理

  • 后端返回什么 前端展示什么
  • 后端返回的角色(管理员 ,老师,学生)前端根据角色拼接数据信息展示

vue 移动端 pc 结构图

vue 和 elmentui开发后台系统项目总结_第6张图片

遍历图片

  • 这种方式 图片无法显现 原因是 webpack 在编译时不会把该路径当做图片 把它当做字符串处理
data(){
	return {
		items['./asset/1.jpg','./asset/2.jpg','./asset/3.jpg']
	}
  • 更改用 reuire 引入
data(){
	return {
		items[require('./asset/1.jpg'),require('./asset/2.jpg'),require('./asset/3.jpg')]
	}
}

异步更新DOM

  • 如果你要操作数据数据之后立即操作 数据影响的视图 DOM 那么最好把代码放到 nextTick 函数中
  • 数据改变影响视图更新这件事不是立即的
 this.$nextTick(()=>{
	// 需要更新的数据
})

解决缓存带来的滚动问题

  • 如果页面有多级路由 必定有多个 如果只对 一级路由 加 那么 只会缓存 在这个出口的组件 其余路由出口组件不缓存
  • include 和 exclude 通过组件的 name 判断是否要进行缓存 可以通过 vux 动态进行管理
  • 拿到最外层的dom(ref) 绑定onscroll 事件 每次滚动 记录滚动的位置 记得防抖和节流
  • 缓存的生命周期钩子 create 等等 是不执行的 用 keep-alive 自带的两个钩子

登录成功跳转原网页

import router   from  'router'
function redirectLogin(){
	router.replace({
		name:'login'
// 传递查询参数  查询参数会以 ? 作为分隔符放到 url 后面
query:{
	 //数据名自己起的
	 // router.currentRoute 和我们在组件中获取的 this.$route是一个东西
	 redirect:router.currentRoute.fullPath
}
		
	})

}
  • 在全局路由钩子 beforeeach 判断是否登录 没有登录 调用 redirectLogin()
  • 登录成功后 获取 url 中的query参数 根据该参数进行跳转之前的页面

webpack

  • 打包 就是将各个模块 合成一个js文件
// package.js
{
"script":{
	"build": './node_modules/.bin/webpack'
	}
}
// 在nppm  scripts  中 其实可以直接写 webpack  因为他自己就会自己去   "node_modules/.bin" 那个执行文件
{
"script":{
	"build": 'webpack'
	}
}
// npx webpack
//npx 是npm新增的工具  你使用它执行某个命令 他也会自动去你的项目中  "node_modules/.bin" 查找可执行文件 仅适合执行测试


// 1、 webpack  配置文件  该文件必须是一个导出的对象   
// 2、对象中声明webpack的配置项
// 3、注意 webpack 是基于 node.js 开发运行一个构件工具  他的打包运行的时候回来执行这个文件 得到导出的配置对象  所以这里使用的是 Node.js中的代码相关语法
  • webpack 本身只能理解 JavaScript 和 JSON 文件 loader 让 webpack 能够去处理其他类型的文件并将它转换为有效的模块

配置可以省略的后缀名

webapck 默认只支持省略

  • .wasm
  • .mjs
  • .json 等文件的后缀名如果想要让其它的可省略的后缀名 需要单独配置
module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'],
  },
};

路径别名

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

把VueCli 升级到最新稳定版

使用下面的命令查看你的版本 VueCli 版本

vue --version

升级 VueCli

npm i  -g @vue/cli

升级你的项目中VueCli相关内容 最好在升级之前确保你的项目的Git 工作区是干净的 所有的代码都已经提交

防止升级带来的影响 有问题及时回退

//执行以下命令更新
vue upgrade

分析打包结果

  • 了解打包的内容
  • 找出最大的模块是什么
  • 查找错误到达的模块
  • 优化它

vue-cli-serve build 会在dist目录产生一个可用于生产环境的包 和 为更好的缓存而做的自动 vender chunk spliting 它的 chunk manifes 会内联在HTML

  • –report 和 --report-json 会根据构建统计生成报告 他会帮助你分析包中含的模块的大小内部使用的 Webpack Bundle Analyzer插件

    • 报告会在dist的目录里

项目中 esloader 和 babel同时处理js文件有先后顺序

  • 应该先校验规范 后转换 js代码

你可能感兴趣的:(vue,vue.js,javascript)