上一页 1 ··· 5 6 7 8 9 10 11 12 13 ··· 25 下一页
2022年1月7日
第九节：零散汇总1(defineComponent作用、InstanceType获取组件对象、json转换ts、代理配置、globalProperties全局属性、{ ...item } 拷贝、template中用别名 )
摘要： 一. 零散知识汇总 1. defineComponent作用 类型推导 和 类型限制 的作用 2. 如何绑定一个组件对象(ts写法)？ 以PageModel组件为例，使用 InstanceType<typeof PageModal>来获取组件类型，最后用ref来包裹。 <template> <pag 阅读全文
posted @ 2022-01-07 09:57 Yaopengfei 阅读(995) 评论(1) 推荐(0) 编辑
第八节：DevOps开发模式详解和基于Jenkins实现项目的自动化部署
摘要： 一. DevOps开发模式 1. 传统模式 在传统的开发模式中，开发的整个过程是按部就班就行： 但是这种模式存在很大的弊端： * 工作的不协调：开发人员在开发阶段，测试和运维人员其实是处于等待的状态。等到测试阶段，开发人员等待测试反馈bug，也会处于等待状态。 * 线上bug的隐患：项目准备交付时， 阅读全文
posted @ 2022-01-07 09:30 Yaopengfei 阅读(1325) 评论(4) 推荐(0) 编辑
2022年1月4日
JavaScript深入系列 + CSS系列
摘要： 一. 简介 历时4个月，边学习，边整理 ES6-ES11可参考之前的系列：https://www.cnblogs.com/yaopengfei/p/14291045.html 后续计划从面试的角度整理一下JS专题，相对侧重于基础 【已完成】 二. CSS系列 阶段一：CSS基础总结 第一节：字体、文 阅读全文
posted @ 2022-01-04 09:13 Yaopengfei 阅读(574) 评论(2) 推荐(1) 编辑
2021年12月26日
第一节：window各种快捷键
摘要： 111 阅读全文
posted @ 2021-12-26 22:02 Yaopengfei 阅读(96) 评论(0) 推荐(0) 编辑
2021年12月19日
第七节：三大封装组件的联调 和 用户/角色/菜单模块核心功能的快速搭建
摘要： 一. 三大组件联调 1. 说明 以用户管理为例，调用page-search搜索框组件、page-content内容区域组件、page-modal弹框组件，完成用户管理模块的：表格分页展示、条件搜索、新增用户、编辑用户、删除用户 等通用功能。 2. 实操 (1). 在<template>中依次引入 p 阅读全文
posted @ 2021-12-19 19:43 Yaopengfei 阅读(274) 评论(4) 推荐(1) 编辑
2021年12月14日
第六节：Table组件封装和基于Table组件的PageContent组件封装
摘要： 一. 整体说明 1. 整体规划 首先利用el-table组件 和 el-pagination组件 封装自己ypf-table组件，实现通过传入配置，预留顶部区域插槽，通过传入配置实现表格的显示。 然后封装 page-content组件，该组件基于ypf-table组件。 各组件的调用顺序： ypf- 阅读全文
posted @ 2021-12-14 20:04 Yaopengfei 阅读(732) 评论(1) 推荐(0) 编辑
2021年12月7日
第五节：Form组件封装和基于Form组件的PageSearch、PageModal组件的封装
摘要： 一. 整体说明 1. 整体规划 首先利用el-form组件，封装一个 ypf-form组件，可以实现通过传入配置，显示各种Form表单。 然后封装 page-search 搜索框组件，该组件基于 YpfForm 然后封装 page-Modal 弹框组件，该组件基于 YpfForm 各组件的调用次序如 阅读全文
posted @ 2021-12-07 22:07 Yaopengfei 阅读(894) 评论(3) 推荐(0) 编辑
2021年12月4日
第四节：菜单权限、动态路由注册、菜单搭建、面包屑、按钮权限 剖析
摘要： 一. 菜单权限-动态路由注册 1. 核心思路 (1). 首先我们知道不同账号登录，会拥有不同的菜单权限，在前端仅仅需要把有权限的路由注册进去即可，而不是把所有路由都注册了，这就是所谓的动态路由注册。 (2). 前端先把所有的路由都建立出来，然后接口中返回有权限的菜单，这里接口中返回的菜单数据 需要  阅读全文
posted @ 2021-12-04 09:14 Yaopengfei 阅读(1265) 评论(1) 推荐(0) 编辑
2021年11月24日
第三节：整体架构剖析、登录业务编写
摘要： 一. 整体架构剖析 1. 目标 该项目架构的搭建，侧重组件的抽取、封装、调用；各个组件的相互通信；侧重于一些核心方案的实现；侧重于vue3+ts+elementPlus+vuex的使用。 忽略项目的UI、忽略一些基本的验证逻辑、忽略一些无关紧要的位置。 2. 核心组件封装 (1). breadcru 阅读全文
posted @ 2021-11-24 13:06 Yaopengfei 阅读(316) 评论(4) 推荐(0) 编辑
2021年11月18日
第二节：三方库集成和配置(vue cli-webpack、element-plus、axios、vscode、区分不同环境)
摘要： 一. vue cli-webpack配置 1. 说明 在vue cli创建的项目中，配置文件为：vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动 阅读全文
posted @ 2021-11-18 17:10 Yaopengfei 阅读(849) 评论(1) 推荐(0) 编辑
2021年11月17日
第一节：项目创建和各种配置规范(editorconfig、prettier、eslint、.browserslistrc、tsconfig、git等)
摘要： 一. 项目创建 1. 搭建步骤 (1). 输入指令【vue create vue3_cms01】，创建项目，进行如下选择。 (2). 选择项目包含的内容，如下图所示，babel、ts、vue-router、vuex、css处理器、Linter都集成进去。 (3). 对集成进去的类库进行选择，如下图： 阅读全文
posted @ 2021-11-17 18:51 Yaopengfei 阅读(1251) 评论(2) 推荐(0) 编辑
2021年11月10日
第五节：TypeScript泛型详解 和 模块、模块化、namespace、类型查找、declare剖析
摘要： 一. ts泛型详解 1. 泛型实现参数化 // 当定义一个函数，不确定参数类型的时候，可以使用泛型 function myPrint<T, M>(obj1: T, obj2: M): void { console.log(obj1); console.log(obj2); } // 调用方式1：明确 阅读全文
posted @ 2021-11-10 10:39 Yaopengfei 阅读(1349) 评论(1) 推荐(0) 编辑
2021年11月9日
第四节：TypeScipt类、接口、枚举类型详解
摘要： 一. ts类详解 1. 类的定义 class Person { // 属性 name: string age: number // 构造函数 constructor(name: string, age: number) { this.name = name; this.age = age; } // 阅读全文
posted @ 2021-11-09 09:02 Yaopengfei 阅读(507) 评论(0) 推荐(0) 编辑
2021年11月3日
第三节：TypeScript类型补充和函数详解(参数、返回值、类型、参数【可选/默认】、剩余参数、this、重载)
摘要： 一. TypeScript类型补充 1. 类型断言 有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions） ，TypeScript只允许类型断言转换为 更具体 或者 不太具体 的类型版本，此规则可防止不可能的强制转换。 符号：as // 1.类型 阅读全文
posted @ 2021-11-03 14:54 Yaopengfei 阅读(1500) 评论(1) 推荐(0) 编辑
2021年11月1日
第二节：ts变量声明、通用js数据类型、ts新数据类型、ts类型补充
摘要： 一. TypeScript变量声明 1. 变量的声明 声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解。标准格式如下： var/let/const 标识符: 数据类型 = 赋值; 实操： let msg1:string='1234'; //这里小写的string代表的是 阅读全文
posted @ 2021-11-01 17:17 Yaopengfei 阅读(2226) 评论(1) 推荐(0) 编辑
2021年10月28日
第一节：TypeScript简介(特点、编译环境、运行模式)、基于webpack 或 ts-node运行ts详解
摘要： 一. TypeScript简介 1. JavaScript痛点 (1). 优秀的JavaScript没有缺点吗？ A. 比如ES5以及之前的使用的var关键字关于作用域的问题； B. 比如最初JavaScript设计的数组类型并不是连续的内存空间； C. 比如直到今天JavaScript也没有加入类 阅读全文
posted @ 2021-10-28 09:02 Yaopengfei 阅读(927) 评论(1) 推荐(0) 编辑
2021年10月26日
第十七节：Vuex4.x 之Module详解(局部状态、命名空间、辅助函数等) 和 补充nexttick用法
摘要： 一. Module说明 1. 什么是Module？ 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store 对象就有可能变得相当臃肿； 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）； 每个模块拥有自己的 state、mutati 阅读全文
posted @ 2021-10-26 09:32 Yaopengfei 阅读(1147) 评论(1) 推荐(0) 编辑
2021年10月22日
第十六节：Vuex4.x 简介及state、getters、mutations、actions详解(OptionApi 和 CompositionApi)
摘要： 一. Vuex简介 1. 简介 (官网地址：https://next.vuex.vuejs.org/zh/index.html 在Vue2中使用的详见：https://www.cnblogs.com/yaopengfei/p/14571316.html 本节采用的版本号【4.0.2】) Vuex 是 阅读全文
posted @ 2021-10-22 15:36 Yaopengfei 阅读(1427) 评论(1) 推荐(0) 编辑
2021年10月20日
第十五节：VueRouter4.x用法之router-link/router-view的v-slot、动态增删路由、路由导航守卫
摘要： 一. router-link的v-slot （需要复习一下插槽的相关用法：https://www.cnblogs.com/yaopengfei/p/15338752.html） 二. router-view的v-slot 了解即可 三. 动态增删路由 1. 添加路由 (1). 添加1级路由 使用ad 阅读全文
posted @ 2021-10-20 09:59 Yaopengfei 阅读(4826) 评论(2) 推荐(1) 编辑
2021年10月16日
第十四节：VueRouter4.x简介、基本用法、路由懒加载(打包分析)、动态路由、路由嵌套、相关Api
摘要： 一. 简介和基本用法 1. 简介 (官网地址：https://next.router.vuejs.org/zh/introduction.html) Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路 阅读全文
posted @ 2021-10-16 10:53 Yaopengfei 阅读(1408) 评论(2) 推荐(0) 编辑
2021年10月13日
第十三节：Vue3高级之 render/h函数、jsx、自定义指令、teleport、插件
摘要： 一. render/h函数(了解) 详见：https://v3.cn.vuejs.org/guide/render-function.html#dom-树 二. jsx(了解) Vue3.x版本创建的项目使用jsx已经不需要配置babel了。 代码分享： <script> import HelloW 阅读全文
posted @ 2021-10-13 15:15 Yaopengfei 阅读(3373) 评论(1) 推荐(1) 编辑
2021年10月10日
第十二节：Vue3的Composition Api(生命周期、provide/Inject、综合练习-hook封装) 和 setup顶层开发模式
摘要： 一. 生命周期钩子 1. 说明 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项，也可以替代 生命周期钩子。 注：因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在 阅读全文
posted @ 2021-10-10 21:37 Yaopengfei 阅读(5142) 评论(1) 推荐(0) 编辑
2021年10月5日
第十一节：Vue3的Composition Api(toRefs/toRef、customerRef、computed、watchEffect、watch)
摘要： 一. toRefs/toRef 1. 背景 我们都知道reactive处理的对象是响应式的，但是使用ES6的解构语法对reactive对象进行处理，那么之后无论是修改解构后的变量name、age，还是修改reactive返回的原始对象info1，数据都不再是响应式的。 2. 使用 (1). toRe 阅读全文
posted @ 2021-10-05 19:49 Yaopengfei 阅读(565) 评论(1) 推荐(0) 编辑
2021年10月2日
第十节：复习mixin/extends 和 开启Vue3的Composition Api(setup、reactiveApi、refApi、readonly)
摘要： 一. Vue2.x的mixin和extends 1. mixin简介 (1). 目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。 (2). 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成： A. M 阅读全文
posted @ 2021-10-02 19:41 Yaopengfei 阅读(2323) 评论(2) 推荐(0) 编辑
2021年9月28日
第九节：动态组件和keep-alive缓存、webpack分包和异步组件、引用元素/组件($ref)、组件生命周期、组件v-model
摘要： 一. 动态组件和keep-alive 1. 背景 比如我们要做一个动态组件的切换，传统的做法是通过v-if进行判断切换，核心代码如下： 2. 动态组件 (1). 基本使用 动态组件是使用 component 组件，通过一个特殊的attribute is 来实现： 代码分享： <template> < 阅读全文
posted @ 2021-09-28 13:41 Yaopengfei 阅读(489) 评论(4) 推荐(0) 编辑
2021年9月26日
第八节：插槽简介及基本用法、剖析具名插槽、作用域插槽的使用
摘要： 一. 简介及基本用法 1. 简介 (1). 什么时候使用插槽？ 插槽的使用过程其实是抽取共性、预留不同； 我们会将共同的元素、内容依然在组件内进行封装； 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素； (2). 如何定义插槽？ 在封装组件中，使用特殊的元素<slot>就可以 阅读全文
posted @ 2021-09-26 16:27 Yaopengfei 阅读(1486) 评论(1) 推荐(0) 编辑
2021年9月22日
第六节：Vue Cli的使用复习 和 Vite入门使用
摘要： 一. Vue Cli复习 (在Vue2.x章节中，详细整理过，基本没变化，详见：https://www.cnblogs.com/yaopengfei/p/14506321.html) 1. 相关指令 Vue的脚手架就是Vue CLI：CLI是Command-Line Interface, 翻译为命令 阅读全文
posted @ 2021-09-22 15:23 Yaopengfei 阅读(749) 评论(2) 推荐(0) 编辑
2021年9月21日
第四节：Webpack本地服务器搭建、剖析devServer的HRM热替换和其它配置、resolve模块解析、区分开发/生产环境方案实战
摘要： 一. webpack本地服务器搭建 1. 为什么要搭建本地服务器？ 我们之前通过【npm run build】，编译相关的代码； 然后需要在浏览器中运行，每次修改修改代码，都需要重新编译运行，很麻烦。我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示 。 2. watch mode模 阅读全文
posted @ 2021-09-21 19:10 Yaopengfei 阅读(324) 评论(1) 推荐(0) 编辑
2021年9月18日
第三节：Babel的使用、Webpack集成Babel、单文件Vue打包
摘要： 一. Babel的使用 1. 为什么要用babel？ 比如我们想使用ES6+的语法，想要使用TypeScript，但是很多旧浏览器又不支持这些新语法，这个时候就需要使用babel了。 Babel是一个工具链，主要用于旧浏览器或者环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的Ja 阅读全文
posted @ 2021-09-18 14:50 Yaopengfei 阅读(1324) 评论(2) 推荐(0) 编辑
2021年9月17日
第二节：Webpack资源模块(替代file/url-loader)、插件使用(Clean/Html/Define/Copy)、mode的配置说明
摘要： 一. 资源模块(asset model) 1. 说明 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。 (1). 在 webpack 5 之前，通常使用： （需要npm来安装） raw-loader 将文件导入为字符串 url-lo 阅读全文
posted @ 2021-09-17 15:01 Yaopengfei 阅读(723) 评论(1) 推荐(0) 编辑
上一页 1 ··· 5 6 7 8 9 10 11 12 13 ··· 25 下一页