- 博客(23)
- 收藏
- 关注
RSS订阅原创 vscode中react项目实现tab自动补全标签
需要修改两个配置，修改后要重启！首先我们先打开【设置】，windows和mac不同windows：【文件File】---【首选项Preferences】---【设置Setting】mac：【code】---【首选项Preferences】---【设置Setting】第一步：在设置里搜索includeLanguages，将javascript后面的Value修改为javascriptreact；第二步：在设置里搜索triggerExpansionOnTab，勾选选择框；最后重启
2021-01-18 10:28:46
759
1
原创 react项目中使用react-router-dom
1. 安装react-router-domnpm install react-router-dom -S2. 新建router.jsimport React from 'react'import { HashRouter, Route, Switch, hashHistory, Redirect} from 'react-router-dom'import App from './App'import Login from './views/Login/Login'import Lis
2020-10-18 20:53:40
316
原创 react项目中如何使用react-redux
安装npm install redux react-redux redux-thunk -S目录结构Tips：与Redux无关的目录已省略|--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-- state.js |-- components 组件目录 |-- Test.js
2020-10-18 20:53:25
578
原创 react中使用fetch发送请求
1. 安装fetchnpm install whatwg-fetch -S2. 页面中使用fetch// 引入fetchimport 'whatwg-fetch';fetch('https://api.apiopen.top/getJoke?page=1&count=5&type=video',{ method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type
2020-10-18 20:53:15
1107
原创 create-react-app怎么按需引入antd和主题定制
第一步暴露配置：yarn eject第二步实现antd按需加载yarn add babel-plugin-import// 修改package.json"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": "css" } ] ]}第三步le
2020-10-17 14:11:34
540
5
原创 create-react-app创建的react项目怎么引入less文件
通过create-react-app创建的项目并没有暴露出webpack的相关配置，所以我们要通过运行npm run eject来显示webpack相关文件。项目中会多出一个config目录，它里面就包含了webpack的相关配置文件。1. 显示webpack配置文件npm run eject如果运行npm run eject报错，先运行 git add . 和 git commint -m ‘app init’ 这两个命令，在运行npm run eject命令即可.2. 安装less和les
2020-10-17 14:07:20
1524
2
原创 react生命周期详解＜16.0
生命周期：一个组件从开始到消亡所经历的各种状态。生命周期函数：组件从被创建，被挂载到页面，页面关闭被卸载等各个阶段伴随着各种的事件，这些事件就被称为生命周期函数。通过声明周期函数可以让开发者的代码参与到组件的声明周期中，这样开发者就可以控制组件的行为。React组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）。创建阶段（Mounting）：该阶段函数只执行一次getDefaultProps：只调用一次，实力之间共享引用
2020-10-17 14:05:14
165
原创 vue-cli3配置多项目并按项目分别打包
本次项目由于分为客户端和客服端，第一反应便是在vue中构建多页面。项目结构：这里主要讲解下面所标文件的用处vue.config.js相关配置：配置好之后，运行npm run build，项目被打包到dist文件夹下，结果如下图：可以看出不同项目的资源都会打包到了一起，但这不是我想要的结果，那么接下来只需要修改一下vue.config.js配置，即可使打包的文件按照项目进行分离。let projectName = process.argv[3]let glob = require('glo
2020-10-17 14:00:00
3732
4
原创 vue-cli3.0使用富文本编辑器vue-ueditor-wrap
参考文档：vue-ueditor-wrap该文档主要介绍的是再vue-cli2中的使用。而我的项目用的是vue-cli3.x，所以下面主要介绍在vue-cli3.0中的使用。1.下载UEditor下载地址：UEditor官方下载UEditor文档：UEditor官方文档2.安装npm i vue-ueditor-wrap -S或者 yarn add vue-ueditor-wrap -S3.引入import VueUeditorWrap from 'vue-ueditor-wrap
2020-10-17 13:54:03
3058
原创 js如何下载后台返回的url文件
当ajax请求到一个文件是url地址(http://…)时，如何下载这个文件？如果程序自动执行window.open(url)，是会被浏览器拦截的。但是如果是用户手动触发就不会拦截。做法：先定义一个空的窗口或者在当前窗口，然后在赋值href。window.open('','_self').location.href = response.data.url...
2020-10-17 13:38:03
1172
原创 vue-cli3如何快速构建低版本vue项目
当vue cli版本>=3，如果运行vue init，则会报错，那么我们如何利用vue-cli创建低版本的项目呢？因为vue-cli3和vue-cli采用了相同的vue命令，我们只需要全局安装一个桥接工具就能继续使用vue init 命令，来快速创建低版本的vue项目。npm install -g @vue/cli-init安装完成后，运行 vue init webpack 项目名，就不会再报错了。...
2020-10-17 13:36:15
561
原创 vue-cli3中如何设置骨架屏vue-skeleton-webpack-plugin
github地址：https://github.com/lmy01/vuecli3_skeleton_demo1.安装插件 vue-skeleton-webpack-plugin"vue-skeleton-webpack-plugin": "^1.2.2",2.在src/components/创建只包含骨架屏内容的Skeleton.vue模板3.在src/下创建骨架屏入口文件skeleton.js4.在vue.config.js中配置骨架屏参数这里的模板是统一的，如果想根据页面内容自动生
2020-10-17 13:33:50
908
2
原创 Nuxt.js快速构建教程
前言VUE开发一个单页面应用有个不好的点就是对搜索引擎SEO十分不友好，我们的网站要想在搜索引擎中排名靠前，少不了SEO优化，而Nuxt.js就是VUE用来解决这个问题的。它是在服务端渲染SSR后直接返回已经渲染好的页面，页面就不再只是一个div标签。详细介绍：Nuxt.js是什么？相关demo：https://github.com/lmy01/nuxt_demo快速构建一个Nuxt.js项目利用Nuxt.js团队提供的脚手架工具 create-nuxt-app，前提确保安装了npx（npm5.2.
2020-10-17 13:16:46
629
原创 利用mpvue快速创建小程序
准备环境：在git bash中运行vue -V，检查当前vue-cli版本是否为2.0版本，如果是则跳过下列步骤；如果是3.0则需要先运行一行代码：npm install -g @vue/cli-init，这样即使是vue-cli3.0环境下仍可以使用vue init功能。因为vue-cli3使用形同的vue二进制文件，因此会覆盖掉2.0的功能。1.利用vue-cli创建一个小程序项目vue init mpvue/mpvue-quickstart wx_project一路回车，安装完成后运行 np
2020-10-16 21:05:10
141
原创 你必须知道的flex伸缩布局
伸缩布局：display:flex;让大盒子成为容器，容器有主轴和侧轴；子盒子是容器的项目，项目默认会从主轴的起点沿主轴的方向依次排列，如果超过容器，则会自动收缩，不换行 所以一定要注意当前主轴的起点在什么地方容器的6个属性：写在容器的css里—1---flex-direction控制主轴的方向：row→：默认值，主轴呈现水平方向从左往右column↓：主轴呈现垂直方向从上往下，项目会垂直排列，侧轴会变成水平方向从右往左row-reverse← 主轴呈现水平方向从右往左，项目的排列也会反过来
2020-10-16 21:02:35
1584
原创 css经典4种经典流式布局
左侧固定，右侧自适应左边写死宽高，并浮动，右边高度写死，但是不能设置宽度，用margin-left去留出左边盒子的宽度，右边盒子会自动内减，右侧盒子不会被撑大。一个没有width属性的标准流盒子，设置margin和padding并不会撑大盒子的实际宽度，相当于设置了box-sizing：border-box；左侧自适应，右侧固定设置第一个盒子右浮动，相当于右侧盒子，第二个盒子高度固定，宽度不写，设置margin-right，盒子自动内减注意，不可先写左侧的固定盒子，否则，左侧盒子会占一行，右侧盒子
2020-10-16 21:01:00
4690
原创 利用babel将es6转为es5
第一种方法：1.安装babel-cli（用于在终端使用babel）npm install -g babel-cli 2.安装babel-preset-es2015插件npm install --save babel-preset-es2015 以上两步即可在终端运行babel js文件名 来运行使用了es6语法的js文件3.配置.babelrc，参考的下面的配置文件.babelrc注意：此时的es6.js中不能通过import引入外部的文件，否则会报错：require is not d
2020-10-16 21:00:01
744
原创 vue中利用PostCSS实现移动端自适应
1.利用npm安装下面9个插件2.将下列代码复制到.postcssrc.jsmodule.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {},
2020-10-16 20:54:11
984
原创 利用typescript进行类型检查
TypeScript介绍TypeScript官网：https://www.tslang.cn/基本使用全局安装：npm i typescript -g，然后就可以使用tsc命令编译.ts文件。let num: number = 100; //index.tsfunction test(a: number): number {}在git里运行 tsc index.ts //会自动在同级目录下生成index.js配置文件运行tsc --init，会生成tsconfig.json配置文
2020-10-16 20:51:35
1627
原创 利用flow进行类型检查
类型介绍JS语言的特征（类型方面）：弱类型，动态类型检查的语言。弱类型：在声明变量的时候，可以为变量赋值任何数据，不需要指定变量的数据类型。var a = 10;a = ”abc“;强类型：一旦声明变量，该变量的数据类型就已经确定，如果要改变变量的类型，需要进行强制类型转换。int a = 10;a = “10”; //报错动态类型：类型检查是在代码运行的时候进行。var obj = {};obj.forEach(function(v,i){ // 当代码运行到这里的时
2020-10-16 20:02:33
663
原创 angular-cli快速创建angular6项目
angular介绍是Google开发的js前端框架；可以开发移动端和桌面端；已被Google用到600多种不同产品中，能满足不同场景下的开发需求，更适合开发现代Web应用；从工程化角度出发的一个大而全的框架，提供了针对不同需求的多套完整的解决方案；基于TS强类型开发，增强了ng项目的可维护性；性能高，体积小。Ivy是ng新一代的渲染引擎，ng和webpack的合作中，采用webpack的tree shaking的理念，将项目未用到的内容从框架中剥离出去，从而达到体积的缩减。ng版本说明：Ang
2020-10-16 19:52:44
515
原创 css之filter滤镜（网站一键变色）
有时我们会看到在一些特殊节日，例如清明节或公祭日的时候，很多网站或者app所有内容都会变成灰色，这里就是利用了css的filter样式。// 只要作用到html标签上，即可实现一行代码让网页内容全部变灰html{filter: grayscale(100%);}下面是关于filter属性所有的值：Filter 描述none 默认值，没有效果。blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则
2020-10-16 19:44:06
1525
原创 element-ui的el-table怎么自定义合并表头
table自带合并属性：rowSpan和colSpan，所以合并表头的思路是：获取所有的表头单元格，针对性的对需要合并的单元格进行操作。比如我们想要合并的是第二列和第三列，那么我们先获取到所有的表格，然后将第二列表头的colSpsn设为2，将第三列表头的display设为none。data() { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1
2020-10-16 19:39:50
9368
13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人