- 博客(15)
- 收藏
- 关注
RSS订阅原创 webpack打包发布（完结）
打包发布1. 为什么要打包发布项目开发完成之后，使用webpack对项目进行打包发布的主要原因有一下亮点：开发环境下，打包生成的文件存放在内存中，无法获取到最终打包生成的文件。开发环境下，打包生成的文件不会进行代码压缩和性能优化2. 配置webpack的打包发布在package.json 文件的scripts节点下，新增build命令如下："scripts":{ "dev":"webpack serve", //开发环境中，运行dev命令 "build":"webpack --mode
2022-03-19 15:22:48
1368
原创 webpack使用之loader（3）
webpack中的loader1. loader 概述在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错。loader加载器的作用：协助webpack打包处理特定文件模块。比如：css-loader 可以打包处理 .css相关的文件。less-loader 可以打包处理 .less相关的文件。babel-loader 可以打包处理webpack 无法处理的高级JS
2022-03-19 14:53:24
1378
原创 webpack使用之插件应用（2）
1.webpack插件的作用通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：① webpack-dev-server类似于node.js阶段用到的nodemon工具每当修改了源代码，webpack会自动进行项目的打包和构建② html-webpack-pluginwebpack中的HTML插件(类似于一个模板引擎插件)可以通过此插件自定制index.html页面的内容1.1webpack-dev-ser
2022-03-03 10:27:29
360
原创 webpack使用之基本（1）
什么是webpack概念：webpack是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支出，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。好处：让程序员把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。1.在项目中安装webpack在终端运行如下的命令，安装webpack相关的两个包：目前使用的版本，-D把webpack相关的包放在开发的节点下npm install webpack@5.5.1 webpack-cli
2022-03-02 15:25:59
358
原创 regeneratorRuntime is not defined
vue中使用async函数报错regeneratorRuntime is not defined第一步npm i babel-plugin-transform-runtime -D第二步，先找项目里有没有label.config.js的文件，如果没有，请看其他博客。plugins: [ //这个plugins添加下面代码 ["@babel/plugin-transform-runtime"] ],不能解决所有的regeneratorRuntime 问题，需要看打包方式..
2021-12-10 15:36:36
339
原创 3D导航栏
3D动画导航栏<ul> <li> <div class="box"> <div class="front">门店管理</div> <div class="second">权限最高</div> </div> </li> <li>
2021-12-07 15:44:32
105
原创 CSS两面盒子翻转
CSS两面盒子翻转动画首先在给一个大盒子里面包含两个盒子<div class="box"> <div class="front">好好学习</div> <div class="back">天天向上</div></div>CSS body { /*设置元素被查看位置的视图,看着给合适的值*/ perspective: 400px; } .box {
2021-12-07 14:23:46
620
原创 JavaScript 代码好看的6个技巧
1. 简写 if else如果if-else 的逻辑比较降低，简写就能来实现。if(a>10){ b=true;}else{ b=false;}//三元表达式b=(a>10)?true:false;//最简写b=a>102. 多表达式多 if 判断可以在数组中存储多个值，使用数组include方法。if(a==='1'||a==='2'||a==='3'){ //结果}//使用includes方法if(['1','2','3'].includes(a
2021-09-28 09:19:22
85
原创 Vue-i18n国际化组件的使用
Vue-i18n国际化组件的使用项目需求：中英文两种语言切换npm install vue-i18n --save在文件src下创建新文件夹，我取名i18n，在i18n文件下创建langs文件和i18n.js;再langs文件下创建cn.js、en.js、index.js。如图：在i18n.js写入如下代码：import Vue from "vue";import locale from 'element-ui/lib/locale'import VueI18n from "vue-i18
2021-08-05 10:10:26
979
原创 vue+element+Sortable实现表格行拖拽功能
vue+element项目实战：vue+element+Sortable实现表格行拖拽功能1.mpm下载插件 ：npm install sortablejs --save2.页面引入：import Sortable from 'sortablejs'以上步骤进行完毕，就可利用Sortable实现表格拖拽。根据我的项目需求，下面是我的写法，请大家参考：我项目中某个页面需要点击排序，用的是el的dialog弹窗弹窗内对表格进行排序。下面请大家参考代码：3.打开排序的button按钮h
2020-12-13 16:04:07
2410
2
原创 解决Echarts图表影响页面抖动
Echarts图表影响页面抖动鼠标滑过图表时,页面抖动*解决方法如下:在tooltip属性中添加transitionDuration: 0,即可一名前端小学生,如有不足,请指教.谢谢!!
2020-11-02 11:35:52
3157
4
原创 Echarts图表与浏览器窗口自适应
Echarts图表与浏览器窗口自适应当缩小或放大浏览器窗口时,图表不会适应窗口大小,比如我的项目中出现的情况,如下图解决问题代码如下:window.addEventListener('resize',()=>{ this.charts.resize() })填入上段代码即可.一名前端小学生, 如有不足 ,请指教.谢谢!!...
2020-11-02 11:29:55
346
3
原创 element中el-dropdown添加点击事件无效?
element中el-dropdown添加点击事件无效?在el-dropdown-item中添加的click点击事件无效?可以在click后加native实现梦想代码如下一名小学生,欢迎指教!谢谢!
2020-10-30 15:47:03
323
原创 $confirm is not a function($confirm报错的解决方法)
element $confirm is not a function (解决方法)**解决方法:**如下图所示:引入MessageBox弹框把上图的this.$confirm改为MessageBox.confirm 即可谢谢
2020-10-18 17:08:16
8582
3
原创 单独引入element各类组件时,使用element的Message控件，刷新页面会弹出空提示
使用element的Message控件，页面刷新时弹出空的提示消息当我们只引入局部的,自己需要的element组件后, 在使用element的Message控件时，引入Message后会有如下问题：项目中使用局部的,自己需要的element组件, 那么在使用Message控件,页面刷新时会出现图中红框里的空提示在代码中写的message**解决方法:**如下图:引入三步将Vue.use(Message)改成Vue.component(Message.name,Message)就解决问题
2020-10-18 16:53:44
549
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人