Vue-design-view NPM

创建步骤

##全局安装 vite npm install create-vite-app -g ###创建项目 yarn create vite ###输入项目名称, 待项目创建好后。然后进入项目目录执行yarn安装依赖 ###安装Prettier

yarn add prettier --dev
根目录创建.prettierrc文件
配置Prettier规则 ###集成eslint(检验代码格式的工具) yarn add eslint --dev ###安装less yarn add less@next --dev ###安装less-loader yarn add less-loader@next --dev ###安装axios, vue-router, pinia
yarn add axios@next
yarn add vue-router@next
yarn add pinia@last ###pinia 的使用 1 修改 main.ts 文件2 在src目录下创建store文件夹, 添加 index.ts文件3 调用案列

import { useStore } from 'vuex' const store = useStore() console.log("getters: " + store.getters.layoutContentHeight)

###访问全局this

import { getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() console.log(proxy.$config.production)

###vue3 生命周期

onBeforeMount – 在挂载开始之前被调用：相关的 render 函数首次被调用。
onMounted – 组件挂载时调用
onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
onActivated – 被 keep-alive 缓存的组件激活时调用。
onDeactivated – 被 keep-alive 缓存的组件停用时调用。
onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。