- 博客(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
1458
原创 webpack使用之loader（3）
webpack中的loader 1. loader 概述 在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错。 loader加载器的作用：协助webpack打包处理特定文件模块。比如： css-loader 可以打包处理 .css相关的文件。 less-loader 可以打包处理 .less相关的文件。 babel-loader 可以打包处理webpack 无法处理的高级JS
2022-03-19 14:53:24
1444
原创 webpack使用之插件应用（2）
1.webpack插件的作用 通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个： ① webpack-dev-server 类似于node.js阶段用到的nodemon工具 每当修改了源代码，webpack会自动进行项目的打包和构建 ② html-webpack-plugin webpack中的HTML插件(类似于一个模板引擎插件) 可以通过此插件自定制index.html页面的内容 1.1webpack-dev-ser
2022-03-03 10:27:29
437
原创 webpack使用之基本（1）
什么是webpack 概念：webpack是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支出，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。 好处：让程序员把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 1.在项目中安装webpack 在终端运行如下的命令，安装webpack相关的两个包： 目前使用的版本，-D把webpack相关的包放在开发的节点下 npm install webpack@5.5.1 webpack-cli
2022-03-02 15:25:59
434
原创 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
399
原创 3D导航栏
3D动画导航栏 <ul> <li> <div class="box"> <div class="front">门店管理</div> <div class="second">权限最高</div> </div> </li> <li>
2021-12-07 15:44:32
139
原创 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
679
原创 JavaScript 代码好看的6个技巧
1. 简写 if else 如果if-else 的逻辑比较降低，简写就能来实现。 if(a>10){ b=true; }else{ b=false; } //三元表达式 b=(a>10)?true:false; //最简写 b=a>10 2. 多表达式多 if 判断 可以在数组中存储多个值，使用数组include方法。 if(a==='1'||a==='2'||a==='3'){ //结果 } //使用includes方法 if(['1','2','3'].includes(a
2021-09-28 09:19:22
185
原创 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
1060
原创 vue+element+Sortable实现表格行拖拽功能
vue+element项目实战：vue+element+Sortable实现表格行拖拽功能 1.mpm下载插件 ：npm install sortablejs --save 2.页面引入：import Sortable from 'sortablejs' 以上步骤进行完毕，就可利用Sortable实现表格拖拽。 根据我的项目需求，下面是我的写法，请大家参考： 我项目中某个页面需要点击排序，用的是el的dialog弹窗 弹窗内对表格进行排序。 下面请大家参考代码： 3.打开排序的button按钮h
2020-12-13 16:04:07
2559
2
原创 解决Echarts图表影响页面抖动
Echarts图表影响页面抖动 鼠标滑过图表时,页面抖动 *解决方法如下: 在tooltip属性中添加transitionDuration: 0,即可 一名前端小学生,如有不足,请指教. 谢谢!!
2020-11-02 11:35:52
3279
4
原创 Echarts图表与浏览器窗口自适应
Echarts图表与浏览器窗口自适应 当缩小或放大浏览器窗口时,图表不会适应窗口大小,比如我的项目中出现的情况,如下图 解决问题代码如下: window.addEventListener('resize',()=>{ this.charts.resize() }) 填入上段代码即可. 一名前端小学生, 如有不足 ,请指教. 谢谢!! ...
2020-11-02 11:29:55
406
3
原创 element中el-dropdown添加点击事件无效?
element中el-dropdown添加点击事件无效? 在el-dropdown-item中添加的click点击事件无效? 可以在click后加native实现梦想 代码如下 一名小学生,欢迎指教! 谢谢!
2020-10-30 15:47:03
381
原创 $confirm is not a function($confirm报错的解决方法)
element $confirm is not a function (解决方法) **解决方法:**如下图所示: 引入MessageBox弹框 把上图的this.$confirm改为MessageBox.confirm 即可 谢谢
2020-10-18 17:08:16
8880
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
608
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人