- 博客(14)
- 收藏
- 关注
RSS订阅原创 webpack使用方法（五）：使用watch mode和webpack-dev-server
文章目录前言一、使用watch mode(观察模式)二、使用webpack-dev-server前言 在前面几篇文章中，每次想看页面效果都要手动复制index.html页面的路径到浏览器中，而且每次更新文件内容都需要重新执行打包命令，还要手动刷新浏览器才能看到最新的输出内容。 那么有没有办法能让我们省去这些操作，提高开发效率呢？watch mode和webpack-dev-server给了我们答案。一、使用watch mode(观察模式) 在每次编译代码时，手动运行npx webpac
2022-02-21 21:59:26
1340
原创 webpack使用方法（四）：使用HtmlWebpackPlugin插件
文章目录前言一、安装HtmlWebpackPlugin插件二、配置HtmlWebpackPlugin插件前言在前几篇博客中，当我们打包完成后想看运行效果，还需要自己手动去修改index.html中加载bundle.js的路径，这里我们可以使用HtmlWebpackPlugin插件来解决一下这个问题。一、安装HtmlWebpackPlugin插件还是在根目录安装，在终端输入命令行npm install html-webpack-plugin -D二、配置HtmlWebpackPlugin插件
2022-02-20 23:17:07
1611
原创 webpack使用方法（三）：自定义webpack配置
文章目录前言一、设置入口文件二、通过配置文件来配置参数前言 实际上，webpack-cli给我们提供了丰富的终端命令行指令，可以通过webpack --help来查看。同样，需要在前面加上npxnpx webpack --help一、设置入口文件进入上一节的setup目录，手动删除dist文件夹。输入指令npx webpack --entry ./src/index.js --mode production–entry表示设置后面路径的文件为入口文件，–mode指
2022-02-19 22:36:01
860
原创 webpack使用方法（二）：运行webpack
我们通过一个示例来运行webpack，结构如下：在根目录下新建setup文件夹，在setup文件夹中新建src文件夹。在src下新建helloWorld.js，写一个函数，通过export default默认导出printStr方法。// helloWorld.jsfunction printStr() { console.log("hello world!");}export default printStr;在src下新建index.js，通过模块导入的方法，来
2022-02-19 13:46:42
1719
1
原创 webpack使用方法（一）：安装webpack
安装Node.js首先，webpack是构建在Node.js的基础之上的，所以安装webpack之前，需确保本地安装了Node.js。Node.js官网：https://nodejs.org/en/这里有两个版本可供选择，对于开发用户，推荐下载LTS版本（长期支持版本），建议安装最新版本的Node.js，因为老的版本可能会缺失webpack的一些功能。点击安装一直下一步下一步就好了。在命令行中输入node -v，能看到node的版本号表示已经安装成功了。node安装成功的同时，会有另一个工具安装
2022-02-19 12:14:00
7218
原创 vscode常用快捷键
目录一、代码编辑二、使用步骤一、代码编辑输入.box然后按回车键可以创建一个类名为box的div标签；输入#container然后按回车键可以创建一个id为container的div标签；输入ul>li*3然后按回车键可以创建有三个子元素li的无序列表；输入div+p+span然后按回车键会生成如下代码输入div.list>div.item_$*6然后按回车键会生成如下代码输入div>span>a按回车键会生成如下代码二、使用步骤...
2021-09-27 14:09:46
393
原创 vue基于element-ui封装分页组件
目录1.父子组件的方式2.混入的方式1.父子组件的方式 新建一个名为Pagenation的组件，代码如下：<template> <div v-show="pages.total > pages.pageSize"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pa
2021-09-16 10:15:05
367
原创 echarts环形图设置不重复颜色
在做后台管理系统时，很多时候都需要用图表来展示数据，echarts是其中一种使用广泛的图表库，调色盘颜色种数有限，如5.1.2版本，只有9种颜色当需要展示的种类超过9种时，就会重复使用默认的颜色列表但是往往不希望使用重复的颜色，可使用如下方法生成随机的颜色 //随机生成颜色 handleColors(){ let color = ''; let r=Math.floor(Math.random()*256); let g=
2021-08-25 17:43:59
3397
原创 css实现胶囊型按钮
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-05-21 11:56:32
4607
原创 vue中实现局部刷新
某条数据变更后只改变那一条数据，而不是重新加载整个列表后台管理系统一般都会有增删改查等操作，假如一个页面存放八条数据，现在对第三条数据进行变更，变更完成后要刷新数据，有两种方案：数据变更完成后调用查询列表的接口对整个列表进行刷新；只刷新数据列表中要变更的那一条数据，不需要调用查询列表的接口重新加载整个列表；虽然两种方法都可以达到目的，但是第一种方法因为要调接口，显然更耗性能，这里着重说一下第二种方法。在state中定义一个数组dataList用来存放列表数据,定义一个对象modifyForm
2021-05-19 14:46:51
3026
原创 常见的浏览器兼容性问题和解决方案
1.不同浏览器标签默认的padding和margin不同解决方案：css中加通配符*{ margin: 0; padding: 0; }2.图片默认有间距解决方案：使用float为img布局（注意清除浮动）。html:<div class="container"> <div class="image"> <img src="./image/1.png" alt=""> </div> <
2021-05-12 21:51:32
269
转载 几种常见的前端跨域解决方案
1. JSONP跨域jsonp的原理就是利用script标签没有跨域限制，通过script标签 src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。1).原生js实现<script> var script = document.createElement('script'); script.type = 'text/javascript';
2021-05-08 17:26:33
129
原创 记录一次vue项目中遇到的core-js包的问题
安装依赖包之后运行项目遇到以下报错：有人说在babel.config.js中添加：presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]添加之后运行项目确实不会报错了，由于项目所使用的一些插件只支持在ie上运行，我打开ie后页面是一片空白。也有人说是版本的问题，需要输入如下命令npm install core-js@3 --save或者npm install core-js@2 --save运行npm install core-js@
2021-04-22 14:41:04
1332
原创 小程序消息提示框标题字数限制
在做小程序的时候，有时候为了更好的交互性，我们需要使用消息提示框showToast方法来告诉用户操作结果。就拿简单的修改密码来说，用户在点击确认修改的时候应该有一个结果的反馈，是修改成功了还是失败了，失败的原因是什么，都应该反馈给用户，而不是直接生硬的返回到上一级页面。wx.showToast常规用法如下，wx.showToast({ title: '成功', icon: 'success', duration: 2000})标题title和延迟时间duration不作讨论，图标ico
2021-02-24 16:50:18
3845
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人