wuyxinu的博客

记录一些我不清楚的玩意。

在一次开发任务中遭遇的一个问题正常使用 element-ui的icon时却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2但是无法解决这个问题失败Vue.config.js 配置问题也就是 webpack的配置问题通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l

前言在学习Vue3的时候，在项目实战中，需要用到watch监听props内属性的值的变化但是却出现了无响应的现象虽然让他可以响应只需要对watch的监听对象做一点小小的修改，但是我们还是需要研究一下具体为什么某些做法无法传值...props: { testData: { type: Object, default: () => {} }}......setup(props) { // 这种写法属于会有响应的情况 watch( () => props.t

前言在Vue3 + TypeScript 学习时，学习到用typescript封装axios时，出现了一个问题那就是如下图所示的config.headers的对象可能未定义问题所在地方一开始我非常的不理解为什么会出现这个问题。因为我的代码是写的也没有问题啊。别人的案例代码也是这样写的。然后我就想，会不会是版本问题。于是开始查看axios的源码果然如此这是axios 0.26.1版本的AxiosRequestConfig里面的headers的类型定义这是0.21.0版本的AxiosRequ

前言在 Vue+TypeScript 项目中，配置 ESLint 和 Prettier，在一开始会有冲突。于是我们需要在 项目内 .eslintrc.js配置一些额外的东西module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'

前言：在进行Vue3源码学习的时候，安装对应项目依赖时，出现的一个安装依赖问题由于Vue3使用的是yarn于是使用yarn install进行依赖安装，于是报下述错误解决方案//设置淘宝镜像下载npm config set puppeteer_download_host=https://npm.taobao.org/mirrorsyarn install给我整无语了...

文章目录Webpack从入门到进阶（三）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点七、DLL1、DLL认识、打包和使用2、Terser3、Tree Shaking4、HTTP压缩八、打包分析和webpack

文章目录Webpack从入门到进阶（一）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点四、Babel的深入解析1、认识Babel2、polyfill3、React和Typescript的支持4、ESLint5、

Webpack从入门到进阶（一）—附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段无论是作为专业的开发者还是接触互联网的普通人，其实都能深刻的感知到Web前端的发展是非常快速的对于开发者来说我们会更加深有体会；从后端渲染的JSP、PHP，到前端原生JavaScript，再到jQuery开发，再到目前的三大框架Vue、React、Angular；开发方式也从原来的JavaScript的ES5语法，到ES6、7、8、9、10，到TypeScript，包括编写CSS的预处理器

前提最近在进行Webpack5学习时，学习到HMR，也就是模块热替换，也叫模块热更新的时候，遇到了一个问题。问题在进行开发环境内模块热更新的时候，React是借助于React Hot Loader来实现的HMR，目前已经改成使用react-refresh来实现了。于是乎，我进行了以下代码的编写// webpack.config.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin

最近在学习webpack5Webpack5 file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。但是页面引入的却是这个无法加载的图片就算是使用了file-loader的outputPath，也会发现，生成的无效图片并不会进入到outputPath中指定的路径里面。问题原因：css-loader版本不同。css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由c

最近在学习webpack的postcss的内容时，在命令行窗口执行下述语句时出现一些错误npx postcss --use autoprefixer -o result.css ./src/css/test.css这是一条利用postcss的autoprefixer插件输出一个给css加上各式浏览器前缀的语句。属于一条简单到再简单不过的命令行操作了，但是居然报错了！一开始，我以为是因为淘宝镜像引起的问题，因为一开始我通过npm安装依赖报错了，就直接用cnpm 安装依赖了结果npm安装依赖之后的

数据可视化-echarts入门、常见图表案例及项目案例一、简介一、数据可视化简介什么是数据可视化？数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。二、echarts简介ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备

SingleSpa及qiankun入门及案例一、简介1、微服务为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）：微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理然而，越来越重的前端工程也面临同样的问题，自然地想到

Vuex单页面状态管理多界面状态管理App.vue<template> <div id="app"> <h2>{{$store.state.counter}}</h2> <button @click = "$store.state.counter++">+</butto...

PromisePromise 三种状态Promise的链式调用

TabBar实现思路实现代码TabBar.vue<template> <div class="tab-bar"> <slot></slot> </div></template><script>export default { name: 'TabBar',...

Vue-Router 传递参数传递参数的方式router 和 route 的区别导航守卫keep-alive

路由后端路由阶段前端路由阶段URL的hashHTML的history模式Vue-Router默认路由HTML5 history 模式路由跳转动态路由路由的懒加载懒加载的方式路由嵌套嵌套默认路径...

定义函数这里输出都是window箭头函数没有自己的this，其内部的this绑定到它的外围作用域。对象内部的箭头函数若有this，则指向对象的外围作用域...

Vue CLIVue CLI 使用前提Vue CLI3 初始化项目Vue CLI2 详解Vue运行过程VueCLI3

引入vue.jsel 和 template的区别vue 组件化开发引入vue文件封装处理plugin添加版权的plugin打包HTML的plugin压缩js的plugin搭载本地服务器...

什么是webpack和grunt/gulp的对比webpack安装什么是loadercss文件处理-打包错误信息less 文件处理图片文件处理ES6语法处理...

JavaScript原始功能CommonJS的了解export 和 importexport default

什么是插槽？插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制从 vue@2.6.x 开始，Vue 为具名和范围插槽引入了一个全新的语法，即我们今天要讲的主角：v-slot 指令。目的就是想统一 slot 和 ...

父子组件的通信props基本用法props数据验证props 的驼峰标识<body> <div id ="app"> <cpn :cinfo="info"></cpn> </div> <template id = "cpn"> ...

组件化vue组件化思想注册组件的基本步骤组件化步骤解析全局组件和局部组件父组件和子组件组件模板的分离写法组件data...

几种for语法用的是前面购物车案例的代码购物车小案例将普通函数转换成JavaScript高阶函数和链式编程箭头函数表单绑定 v-model双向绑定的原理v-model 结合 radiov-model 结合CheckBoxlable好处就是用户可以点击文字也会选中v-model...

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...

v-forv-for 遍历对象组件的key属性当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项...

事件监听 v-on方法有参数而不传参数方法有参数而没有加括号v-on 修饰符.stop 修饰符的使用使用前使用后v-on 常用修饰符vue 条件判断登录切换的小案例v-showv-show 和 v-if 的区别v-if是真正的条件渲染，他会确保在切换过程...

v-bind 动态绑定style计算属性 computedcomputed区别于method的两个核心在官方文档中，强调了computed区别于method最重要的两点computed是属性调用，而methods是函数调用 computed带有缓存功能，而methods不是 computed定义的方法我们是以属性访问的形式调用的，{{compute...