Vue.js常见总结

1,vue代码规范

点击查看

2,vue.config.js配置项

点击查看

3,vue3使用vite的配置

点击查看

4,vue3使用element-plus,引入报错

错误信息:
Uncaught SyntaxError: The requested module '/@modules/lodash/cloneDeep.js' does not 
provide an export named 'default'

解决方法,重新启动项目

5,vue的keep-alive标签的使用

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

排除个别组件的缓存

<template>
  <div id="app">
  	<!-- exclue等于不做缓存的子组件页面的name属性 -->
    <keep-alive exclue="Detail,Detail2,Detail3">
      <router-view/>
    </keep-alive>
  </div>
</template>

activated
进入 缓存组件的时候执行

deactivated
离开 缓存组件的时候执行

6,vue引入组件方式

①普通引入方式

import app from ‘@/components/app’

缺点:webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢

②Vue异步组件技术

component: (resolve)=>require([‘@/components/app’],resolve)

③使用动态的import( )语法(推荐使用)

//没有指定webpackChunkName,每个组件打包成一个js文件
component: ( )=>import(‘@/components/app’)

//指定了相同的webpackChunkName，会合并打包成y一个js文件
component: ( )=>import(/* webpackChunkName:'grounpTest' */‘@/components/appone’)
component: ( )=>import(/* webpackChunkName:'grounpTest' */‘@/components/apptwo’)

注：/ webpackChunkName: ‘grounpTest’ /使用命名chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)

7,vue的拖动实现库(vue dragger)

点击查看