随笔分类 - 07-Vue全家桶
摘要：一. 说明 1. 代码准备 (1). 安装 【npm install webpack webpack-cli -D】 修改package.json中的script标签，使其可以通过 【npm run build】调用局部安装的webpack (2). 代码，故意出错 查看代码 import { ad
阅读全文
摘要：一. CSS相关 (详见官网：https://cn.vuejs.org/api/sfc-css-features.html) 1. scoped作用域 (1). 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 原理：在标签上生成一个 da
阅读全文
摘要：一. 简介 1. 什么Pinia？ Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API（Composition API）。从那时到现在，最初的设计原则依然是相同的，并且目前同时兼容Vue2、Vue3，也并不要求你使用Composition API；P
阅读全文
摘要：一. nextTick用法剖析 (之前的文章参考：https://www.cnblogs.com/yaopengfei/p/15464339.html) 1. 含义 function nextTick(callback?: () => void): Promise<void> 等待下一次 DOM 更
阅读全文
摘要：一. 零散汇总2 1. 父组件调用子组件的属性和方法 如下代码是父组件中引用子组件的代码 <login-account ref="accountRef" /> setup() { // 1.定义属性 const accountRef = ref<InstanceType<typeof loginAc
阅读全文
摘要：一. 零散知识汇总 1. defineComponent作用 类型推导 和 类型限制 的作用 2. 如何绑定一个组件对象(ts写法)？ 以PageModel组件为例，使用 InstanceType<typeof PageModal>来获取组件类型，最后用ref来包裹。 <template> <pag
阅读全文
摘要：一. DevOps开发模式 1. 传统模式 在传统的开发模式中，开发的整个过程是按部就班就行： 但是这种模式存在很大的弊端： * 工作的不协调：开发人员在开发阶段，测试和运维人员其实是处于等待的状态。等到测试阶段，开发人员等待测试反馈bug，也会处于等待状态。 * 线上bug的隐患：项目准备交付时，
阅读全文
摘要：一. 三大组件联调 1. 说明 以用户管理为例，调用page-search搜索框组件、page-content内容区域组件、page-modal弹框组件，完成用户管理模块的：表格分页展示、条件搜索、新增用户、编辑用户、删除用户 等通用功能。 2. 实操 (1). 在<template>中依次引入 p
阅读全文
摘要：一. 整体说明 1. 整体规划 首先利用el-table组件 和 el-pagination组件 封装自己ypf-table组件，实现通过传入配置，预留顶部区域插槽，通过传入配置实现表格的显示。 然后封装 page-content组件，该组件基于ypf-table组件。 各组件的调用顺序： ypf-
阅读全文
摘要：一. 整体说明 1. 整体规划 首先利用el-form组件，封装一个 ypf-form组件，可以实现通过传入配置，显示各种Form表单。 然后封装 page-search 搜索框组件，该组件基于 YpfForm 然后封装 page-Modal 弹框组件，该组件基于 YpfForm 各组件的调用次序如
阅读全文
摘要：一. 菜单权限-动态路由注册 1. 核心思路 (1). 首先我们知道不同账号登录，会拥有不同的菜单权限，在前端仅仅需要把有权限的路由注册进去即可，而不是把所有路由都注册了，这就是所谓的动态路由注册。 (2). 前端先把所有的路由都建立出来，然后接口中返回有权限的菜单，这里接口中返回的菜单数据 需要
阅读全文
摘要：一. 整体架构剖析 1. 目标 该项目架构的搭建，侧重组件的抽取、封装、调用；各个组件的相互通信；侧重于一些核心方案的实现；侧重于vue3+ts+elementPlus+vuex的使用。 忽略项目的UI、忽略一些基本的验证逻辑、忽略一些无关紧要的位置。 2. 核心组件封装 (1). breadcru
阅读全文
摘要：一. vue cli-webpack配置 1. 说明 在vue cli创建的项目中，配置文件为：vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动
阅读全文
摘要：一. 项目创建 1. 搭建步骤 (1). 输入指令【vue create vue3_cms01】，创建项目，进行如下选择。 (2). 选择项目包含的内容，如下图所示，babel、ts、vue-router、vuex、css处理器、Linter都集成进去。 (3). 对集成进去的类库进行选择，如下图：
阅读全文
摘要：一. Module说明 1. 什么是Module？ 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store 对象就有可能变得相当臃肿； 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）； 每个模块拥有自己的 state、mutati
阅读全文
摘要：一. Vuex简介 1. 简介 (官网地址：https://next.vuex.vuejs.org/zh/index.html 在Vue2中使用的详见：https://www.cnblogs.com/yaopengfei/p/14571316.html 本节采用的版本号【4.0.2】) Vuex 是
阅读全文
摘要：一. router-link的v-slot （需要复习一下插槽的相关用法：https://www.cnblogs.com/yaopengfei/p/15338752.html） 二. router-view的v-slot 了解即可 三. 动态增删路由 1. 添加路由 (1). 添加1级路由 使用ad
阅读全文
摘要：一. 简介和基本用法 1. 简介 (官网地址：https://next.router.vuejs.org/zh/introduction.html) Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路
阅读全文
摘要：一. render/h函数(了解) 详见：https://v3.cn.vuejs.org/guide/render-function.html#dom-树 二. jsx(了解) Vue3.x版本创建的项目使用jsx已经不需要配置babel了。 代码分享： <script> import HelloW
阅读全文
摘要：一. 生命周期钩子 1. 说明 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项，也可以替代 生命周期钩子。 注：因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在
阅读全文
浙公网安备 33010602011771号