Vue3 + TS 进阶之路
文章平均质量分 70
以实战为线索,逐步深入 Vue 3.0 的各个环节,掌握前端常用性能体验优化思路,打造完整的前端工作流,提升工程化编码能力和思维能力
带领大家从零开始学习 Vite 2.0 以及 typescipe
从入门到精通系列教程
同名公众号 - 人生代码
这个作者很懒,什么都没留下…
展开
-
一个 NPM 包,帮助数十万程序员提高数十倍效率,难道不开源出来?(一)
我就知道你会点进来看看,吹牛逼的,哈哈,不过呢,我正在朝着这个方向前进,希望大家给我鼓励鼓励,希望点击进来小伙伴点点赞,点点关注。说实话,写这个项目的目的,从我自己写代码,老是写一些重复性的工具方法,一个项目写一遍,开启另外一个项目又写一遍,实际上是复制一遍,所以就有了这个项目第一次尝试使用 rollup 来打包自己的 npm 包,来打包自己工作中一些常用的工具方法,假如你想一起贡献代码,可以一起...原创 2023-07-07 20:44:41 · 128 阅读 · 0 评论 -
手把手教大家实现 npm 包,并发布 npm 仓库,搭建文档(二)
根据 clipboard 文档,我们需要将复制的内容,以及复制动作的节点传递给里面的类。最终会在 dist 目录出现 index.esm.js 和 index.umd.js。这样写完成之后,我们需要到 rollup.config.js 配置打包需要的配置。新建我们的 src 目录,在 src 目录下新建 clip/index.ts。今天我们继续写第二篇文章,来继续优化我们的教程,我们来实现一个复制的功能。然后将这个复制的方法,以及类型导出到 src/index.ts。到这里我们还差一个类型。原创 2023-07-09 08:26:36 · 279 阅读 · 0 评论 -
nuxt.js 踩坑之旅,axios 缓存封装
就像这种 tab 页面渲染的时候,如果我们不想每次都调用接口加载数据,其实就可以使用缓存的方式export default function (context, inject) { let { $axios, redirect } = context inject('getUrl', (url, json) => url + '?' + Object.keys(json).map(key => key + '=' + json[key]).join('&')) $ax原创 2021-08-15 17:38:20 · 553 阅读 · 0 评论 -
nuxt.js 踩坑之旅,layout/default.vue
最主要的就是 标签,在 nuxt.js 服务端渲染的过程中,需要使用 类似于 vue 中的 router-view也能使用 keep-alive 属性:keep-alive-props="{ include: ['index', 'search', 'benifit'] }"整体代码如下:<template> <div class="index-wrapper"> <div class="index-content"> <div原创 2021-08-15 17:29:41 · 1650 阅读 · 0 评论 -
nuxt.js 踩坑之旅,监听路由
今天有一个需求,就是在当前页面点击某个类目,更换路由参数例如:从这个路由 /detail?targetId=2,更换成 /detail?targetId=3这个时候,我第一想到的是 watch 监听路由,但是由于是服务端渲染,第一次是拿不到 this 对象,老是报 this.$axios 不存在所以这个时候,查到文档中的 watchQueryAPI: The watchQuery Property watchQuery(newQuery, oldQuery) { console.log(原创 2021-08-15 17:22:12 · 979 阅读 · 0 评论 -
nuxt.js 踩坑之旅,nuxt.config.js
config header: https://go.nuxtjs.dev/config-header配置 html head 头内容:比如:title, htmlAttrs, meta, link 小图标,scriptshead: { title: 'SIAT-Vacancy', htmlAttrs: { lang: 'en' }, meta: [ { charset: 'utf-8' }, { name: 'viewport', c原创 2021-08-15 15:44:47 · 852 阅读 · 0 评论 -
nuxt.js 踩坑之旅,目录结构
Nuxt.js 的默认应用目录架构提供了良好的代码分层结构,适用于开发或大或小的应用。当然,你也可以根据自己的偏好组织应用代码。资源目录资源目录assets用于组织未编译的静态资源如LESS、SASS或JavaScript。组件目录组件目录components用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有asyncData方法的特性。布局目录布局目录 layouts 用于组织应用的布局组件。若无额外配置,该目录不能被原创 2021-08-15 15:31:51 · 498 阅读 · 0 评论 -
nuxt 踩坑之旅,安装
nuxt 安装还是挺容易的,首先是npx create-nuxt-app <项目名>它会让你进行一些选择:填写项目名称:选择语言:选择包管理器:选择UI组件库:Ant Design VueBalmUIBootstrap VueBuefyChakra UIElementFramevuerkOrugaTachyonsTailwind CSSWindi CSSVantView UIVuetify.js选择请求模块:选择代码规范化:选择测试原创 2021-08-15 15:24:56 · 321 阅读 · 0 评论 -
nuxt.js 踩坑之旅
第一个:屏幕适配问题对应的设计稿是以 1920px 为主的下载flexible.js(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.b原创 2021-08-15 09:38:54 · 343 阅读 · 0 评论 -
electron 打包的踩坑之旅
本项目使用的是这个模板:https://github.com/nuochong/ant-design-pro-vue-electron打包的时候碰到类似这样的问题:Error: Application entry file “index.js” in the “/data/projects/iermu_pc_app/dist/win-unpacked/resources/app.asar” does not exist. Seems like a wrong configuration.解决如下:E原创 2021-08-15 09:30:52 · 2036 阅读 · 0 评论 -
从轨道高度
本节描述了一组“Web 组件”的现代标准。目前,这些标准正在制定中。一些特性得到了很好的支持并集成到现代 HTML/DOM 标准中,而其他特性还处于草案阶段。您可以在任何浏览器中尝试示例,Google Chrome 可能是具有这些功能的最新版本。猜猜,那是因为谷歌研究员支持许多相关规范。之间有什么共同点……整个组件的想法并不新鲜。它用于许多框架和其他地方。在我们讨论实现细节之前,先来看看人类的这一伟大成就:那就是国际空间站(ISS)。这就是它的内部制作方式(大约):国际空间站:由许多组件原创 2021-06-28 21:58:54 · 280 阅读 · 0 评论 -
全网最全的,最详细的,最友好的 Typescript 新手教程
全网最全的,最详细的,最友好的 Typescript 新手教程,拿走不谢,希望给个点赞,在看,转发,谢谢本文翻译自TypeScript tutorial for beginners: wh...原创 2021-04-14 19:57:28 · 461 阅读 · 0 评论 -
面试题:圣杯布局,双飞翼布局了解吗
【布局】聊聊为什么淘宝要提出「双飞翼」布局圣杯 & 双飞翼说到「双飞翼」就不得不提及「圣杯」,两者均为三栏布局的优化解决方案如下图常规情况下,我们的布局框架使用以下写法,从上到下,...原创 2021-04-13 19:27:27 · 360 阅读 · 0 评论 -
beautySmallHuangStation 美女小站来啦
beautySmallHuangStation一些教程大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。基于Koa2+MongoDB实现用户注册登录vue + koa2 实现 se...原创 2021-04-12 19:34:21 · 29125 阅读 · 0 评论 -
面试官:CSS 面试题集锦
z-index和叠加上下文是如何形成的?z-index 层叠上下文的关系层叠上下文z-indexz-index 是什么?z-index 属性设置元素的堆叠顺序,拥有更高的堆叠顺序的元素总是...原创 2021-04-10 08:42:11 · 361 阅读 · 0 评论 -
面试官:对下面的 CSS 题目回答一遍
两种盒模型分别说一下盒子模型盒子模型的各个部分content-box: 内容的实际宽高padding-box: 包围在内容区域外部的空白区域;大小通过 padding 相关属性设置bord...原创 2021-04-09 20:31:28 · 351 阅读 · 0 评论 -
面试官:DTD 有什么作用?
DTD 有什么作用?文档类型声明在 HTML 中,文档类型 doctype 的声明是必要的。在所有文档的头部,你都将会看到"" 的身影。这个声明的目的是防止浏览器在渲染文档...原创 2021-04-08 19:26:29 · 530 阅读 · 0 评论 -
购物车实现
选择商品单选 总金额需要计算全选 总金额需要计算取消全选 总金额需要计算删除 总金额需要计算商品数量增加 单个商品金额需要计算,总金额需要计算减少 单个商品金额需要计算,总金额需要计算...原创 2021-04-02 18:36:48 · 303 阅读 · 0 评论 -
人生百态,有趣而又现实
今天我一定要把这篇可能是万字长文的完成,太他妈有趣。昨天去深圳看了以前初中同学,这位同学的英雄事迹很多,胆子很大,社交能力强大,虽然学历不高,但是很混得开,哈哈,草率了,凡尔赛了哈。接下来就来把故事一个一个的讲出来,同学们拿出凳子做好了,哈哈 。或许所有事情都是真的从少年时期形成的,以后的人生就是围绕它去展开的,这是荣格先生说的,我只是帮他翻译了一下而已。这位朋友跟我说,他从小就有一个点,就是凡事总会有一个结果的。我们是潮汕人来的嘛,他以前从小在家那边喜欢打架,不管打不打得赢,回家总会挨老妈的暴打,原创 2021-04-05 21:12:07 · 304 阅读 · 0 评论 -
我用 Vue3+Ts+Vite2 写了一个美女小黄站
首先使用以下命令创建项目yarncreate@vitejs/appvue3-ts-vite2--templatevue-tsvite.config.jsimport{def...原创 2021-04-01 19:28:12 · 9089 阅读 · 0 评论 -
写代码之前请先看看开发文档规范
1. 组件与样式写在一个目录里面,方便后面移动layoutlayout.vuelayout.less2. 每一个组件都有自己的使用文档说明组件属性,方法说明3. 每一个方法...原创 2021-05-20 07:01:46 · 350 阅读 · 0 评论 -
搭建后台管理系统的思路
从零开始搭建后台管理系统当然,这是一个简易版本的,你可以在这两个基础上加以改造搭建后台管理系统最基础的是什么呢?个人的体会是整体的基础框架,这个是指最基础的框架,比如根 router-vi...原创 2021-04-30 23:12:58 · 588 阅读 · 2 评论 -
编写简单 vuex 的思路
Vuex什么是VuexVuex 是专门为Vue.js设计的状态管理库Vuex 采用集中式的方式存储需要共享的状态Vuex 的作用是进行状态管理,解决复杂组件通信,数据共享Vuex 集成到了...原创 2021-05-02 10:38:15 · 379 阅读 · 2 评论 -
为什么我们需要深入思考?
信息消费峰值。社交媒体、时事通讯、播客……我们的头脑中充满了消防水管,但我们中的许多人却感到空虚。我们的推特上充斥着大量有价值的智慧陈述。但如果只遇到一次,就会把它的价值降低到幸运饼干的程...原创 2021-05-04 22:47:58 · 332 阅读 · 0 评论 -
Vite2 + Vue3 + Typescript 入门级教程
Vite2 + Vue3 + Typescript 入门级教程资源代码可以在这里下载https://download.csdn.net/download/qq_36772866/15791490新建项目创建项目目录 todoList我们来到 Vite2 的官网,网址如下:https://vitejs.dev/guide/#scaffolding-your-first-vite-projectVite2 内置了很多中模板:vanillavuevue-tsreactreact-tsp原创 2021-03-14 22:42:34 · 2371 阅读 · 1 评论 -
小编我使用 Vue3+Ts+Vite2 写了一个美女小黄站
首先使用以下命令创建项目yarn create @vitejs/app vue3-ts-vite2 --template vue-tsvite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'// https://vitejs.dev/config/export default defineConfig({ plugins: [vu原创 2021-04-01 19:13:49 · 8994 阅读 · 4 评论 -
同事问了这样一句话,我惊了。
听说关注我的公众号的小伙伴,点赞,在看,转发三连击的小伙伴盐值都不错今天吃完饭,同事问了我一句话,相当让我惊讶,你有什么想做却没有做的?我说没有啊,我一直在探索啊,而且我也一直在做我想做的...原创 2021-03-30 21:36:06 · 270 阅读 · 0 评论 -
TypeScript新手教程
本文翻译自TypeScript tutorial for beginners: who this guide is forTypeScript新手教程:本指南是给谁看的下面的指南是一个TypeScript教程,供有兴趣学习更多TypeScript知识的JavaScript开发者使用。这意味着您需要对“普通的”JavaScript有足够的了解,尽管我将在接下来的过程中为您提供一些基本的指导。单词TypeScript和“初学者”属于同一个教程吗?在写这篇指南之前,我并不确定,但每天我都看到很多初学者对T原创 2021-03-28 21:58:40 · 378 阅读 · 0 评论 -
用ts+vite2+vue3仿知乎日报(一)
如果这篇文章对您有帮助,请给我点赞,关注,评论,留下您的足迹,谢谢在上一篇文章的基础上,继续这篇文章Vite2 + Vue3 + Typescript 入门级教程在这篇文章中,我学会如何定义一个 Interface 接口什么是接口呢?接口就好比我们临摹的那个帖子,我们需要照着这个帖子去模拟数据首先我们在 src/utils/index.ts 来编写一个格式化日期的方法,这个方法返回一个对象,此时,我们就可以使用接口的结构来定义这个对象了,好了废话不多说,马上来试试interface Obj {原创 2021-03-28 17:59:18 · 354 阅读 · 0 评论 -
深入了解对象属性 getters 与 setters
Property getters and setters有两种对象属性。第一种是数据属性。我们已经知道如何与他们合作。到目前为止,我们使用的所有属性都是数据属性。第二种类型的属性是新的东西...原创 2021-03-17 07:09:20 · 505 阅读 · 0 评论 -
深入了解引用类型
本文将介绍一个高级主题,以便更好地理解某些边缘情况。那并不重要。许多有经验的开发人员在不知情的情况下过得很好。如果你想知道事情是如何运作的,请继续读下去。动态计算的方法调用可能会丢失这一点...原创 2021-03-14 07:52:26 · 305 阅读 · 0 评论 -
深入了解 Proxy 代理
代理对象封装另一个对象并拦截操作,如读取/写入属性和其他操作,可以选择自己处理它们,或透明地允许对象处理它们。很多库和一些浏览器框架都使用代理。在本文中,我们将看到许多实际应用程序。Pro...原创 2021-03-16 10:33:38 · 453 阅读 · 0 评论 -
Vue 源码解析之工具方法
如何定义一个空对象constemptyObject=Object.freeze({})isUndef检测 undefined, nullfunctionisUndef(v){...原创 2021-03-12 08:58:51 · 366 阅读 · 0 评论 -
大厂就是吊,这面试题把我整懵了
大厂就是吊,这面试题把我整懵了题目如下:['1','2','3'].map(parseInt)然后让你说出返回值,以及为什么?不得不说...原创 2021-03-10 07:59:52 · 389 阅读 · 0 评论 -
深入了解对象属性标志以及描述符
属性标志以及描述符正如我们所知,对象可以存储属性。到目前为止,属性对我们来说只是一个简单的“键-值”对。但对象属性实际上是一个更灵活和强大的东西。本章我们将学习额外的配置选项,下一章我们将...原创 2021-03-09 08:06:25 · 459 阅读 · 0 评论 -
零基础入门 Vue 3 Router(二)
带参数的动态路由匹配有时候我们需要给特定的路由模式映射某一个模板组件,这个时候假如我们有一个 List,当我们点击列表项时,需要跳转到详情页,这个时候我们需要动态匹配路由:List.vue实现一个列表,点击跳转到详情页<template> <div> <ul> <li v-for="(item, index) in list" :key="index" @click="click(index)">原创 2021-03-08 21:51:19 · 313 阅读 · 0 评论 -
零基础入门 Vue 3 Router 系列(一)
开始很自然地使用 Vue 和 vue-router 创建单页应用,当添加 vue-router 到混合器中时,我们已经使用组件组合我们的应用,我们需要做的就是将组件跟路由映射,让路由知道如何渲染他们,这里有一个简单的例子:router-link注意,我们使用自定义组件router-link来创建链接,而不是使用常规的a标记。这允许Vue路由器改变URL而无需重新加载页面,处理URL生成以及它的编码。稍后我们将看到如何从这些特性中获益。router-viewrouter-view将显示对应于url原创 2021-03-08 21:50:26 · 373 阅读 · 0 评论 -
深入了解 Dynamic imports
深入了解动态导入我们在前面的章节中提到的导出和导入语句被称为“静态”。语法非常简单和严格。首先,我们不能动态地生成import的任何参数。模块路径必须是原语字符串,不能是函数调用。这不会工...原创 2021-03-06 10:47:33 · 867 阅读 · 0 评论 -
面试官:几分钟搞懂异步迭代和生成器
异步的迭代和生成器异步迭代允许我们迭代异步的、按需的数据。比如,当我们通过网络一块一块地下载东西的时候。而异步生成器使它更加方便。让我们先看一个简单的示例,以掌握语法,然后回顾一个实际的用...原创 2021-03-02 21:30:46 · 430 阅读 · 0 评论 -
拥抱 Vite2.0 系列(二)
特征在最基本的层次上,使用Vite进行开发与使用静态文件服务器没有太大区别。但是,Vite对本机ESM导入提供了许多增强功能,以支持通常在基于捆绑程序的设置中常见的各种功能。NPM依赖关系...原创 2021-02-24 07:28:19 · 588 阅读 · 1 评论