vue3
温情key
坚持创作 收获壮硕
展开
-
vue3快速入门-Tree shaking
是一种通过清除多余代码方式来优化项目打包体积的技术, 也就是找出使用的代码。 是基于ES6模板语法 、,主要是借助模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量在 中,我们使用全局 API (如:) 是不需要我们手动去导入的。如下:也就是说,Vue全局API不是通过模块系统导入的,结合介绍,就可以知道在中,就算我们的代码没有使用到全局API,在项目打包的时候,这些全局API相关的依然会被一同打包进来,这样就导致了项目存在太多的无用代码。所以,引入了特性,对全局API进行分块,原创 2022-07-02 14:49:59 · 1132 阅读 · 0 评论 -
element plus表单自定义校验规则和验证单个字段
关键代码// prop 设置校验规则<el-form ref="registerFormRef" :model="registerForm" status-icon :rules="registerRules" label-width="70px"> <el-form-item label="手机号" prop="tel"> <el-input v-model="registerForm.tel" autocomplete="off" placehold原创 2022-05-13 21:16:47 · 5338 阅读 · 0 评论 -
推荐几个 VUE UI组件库
PC端1. Element Plus - 饿了么 UI 组件库在 2022 年春节后第一个工作日,饿了么大前端团队发布了 Element Plus 正式版,标志着 Element 正式支持 Vue 3。官网: https://element-plus.org/zh-CN/2. Ant Design of Vue - 阿里 UI 组件库Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品。官网: h原创 2022-05-10 12:44:49 · 4026 阅读 · 1 评论 -
vue3配置全局参数(挂载全局方法)以及组件使用方法
vue2的方式1. 全局挂载 Vue.property.xxximport Vue from "vue";import axios from "axios";Vue.prototype.$http= axios;new Vue({ router, store, render: (h) => h(App),}).$mount("#app");2. 组件使用this.$http.xxx();vue3的方式1. 全局挂载 app.config.globalPrope原创 2022-04-18 14:29:18 · 5383 阅读 · 1 评论 -
vue3+pinia的使用(快速入门)
1. pinia介绍官网关于pinia的介绍Pinia 是一个状态管理库,由 Vue 核心团队维护,对 Vue 2 和 Vue 3 都可用。现有用户可能对 Vuex 更熟悉,它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好,因此 Vuex 现在处于维护模式。它仍然可以工作,但不再接受新的功能。对于新的应用程序,建议使用 Pinia。事实上,Pinia 这款产品最初是为了探索 Vuex 的下一个版本,整合了核心团队关于 Vuex 5 的许多想原创 2022-04-15 17:51:47 · 6646 阅读 · 0 评论 -
vue3当前组件监听路由变化
1. 使用watch监听import { defineComponent, watch } from "vue";import { useRoute } from "vue-router";export default defineComponent({ setup() { const route = useRoute(); watch(() => route.path,(newPath, oldPath) => { console.log(newPath)原创 2022-04-15 15:47:12 · 5355 阅读 · 1 评论