Tsunami黄嵩粟 - 博客园

2021年2月25日

摘要： tree-shaking是webpack中自带的功能，其作用是去除项目中无用代码(一般只的都是自己所写代码)，减少代码体积(涉及到第三方类库,往往不一定有效。) 前提：必须使用es6模块开启production环境在package.json文件中添加了 "sideEffects": false 阅读全文

posted @ 2021-02-25 14:48 Tsunami黄嵩粟阅读(62) 评论(0) 推荐(0)

webpack js兼容处理

摘要： webpack在不需要引入任何loader可以对于js进行打包处理，但是它不会对于js兼容性进行任务的处理，而我们编写的项目是需要在不同的浏览器中运行的，此时就需要对于js的兼容性在打包过程中进行对应的处理。使用babel来完成对应的js兼容处理 # 早期使用 @babel/polyfill 来完成阅读全文

posted @ 2021-02-25 14:45 Tsunami黄嵩粟阅读(167) 评论(0) 推荐(0)

webpack处理静态资源

摘要：像项目中字体资源是不需要进行打包处理的，可以直接的通过复制方式给打包到目标目录中 # 安装 npm i -D copy-webpack-plugin # 引入 const CopyPlugin = require('copy-webpack-plugin') # plugins配置 plugins: 阅读全文

posted @ 2021-02-25 14:38 Tsunami黄嵩粟阅读(165) 评论(0) 推荐(0)

webpack配置图片处理

摘要： # 安装 npm i -D url-loader html-loader file-loader # loader配置 module: { rules: [ // 图片处理 { test: /\.(png|jpeg|jpg|gif)$/, use: [ { loader: 'url-loader', 阅读全文

posted @ 2021-02-25 14:29 Tsunami黄嵩粟阅读(114) 评论(0) 推荐(0)

升降排序

摘要： name就是前面的数据 num就是次数 for (const k in speakerss[index]) { this.therrUserListss.push({ name: k, num: speakerss[index][k] }) } this.fourUserListss = this. 阅读全文

posted @ 2021-02-25 11:41 Tsunami黄嵩粟阅读(51) 评论(0) 推荐(0)

webpack配置css预处理

摘要： webpack默认只支持js的打包，不支持其它类型，为了让它支持样式的打包就需要加载一些loader 打包css文件在webpack中配置对应的loader 在入口js文件中通过import导入样式 sass处理 # 安装css预处理loader npm i -D style-loader css 阅读全文

posted @ 2021-02-25 11:12 Tsunami黄嵩粟阅读(118) 评论(0) 推荐(0)

2021年2月19日

webpack的基本使用

摘要：在项目根目录下面创建一个webpack.config.js文件，webpack运行的环境为nodejs环境，所以此文件中的模块化规范为commonjs规范写法 // webpack运行node环境的 // 此处的模块化规范为 commonjs规范 module.exports 导出导入 requi 阅读全文

posted @ 2021-02-19 18:08 Tsunami黄嵩粟阅读(86) 评论(0) 推荐(0)

webpack

摘要：官网：https://webpack.js.org 中文网：https://www.webpackjs.com webpack是一种前端资源构建工具，一个静态模块打包器.在webpack看来，前端的所有资源文件(js/json/css/image/less/sass...)都会作为模块处理。它将根据阅读全文

posted @ 2021-02-19 17:55 Tsunami黄嵩粟阅读(151) 评论(0) 推荐(0)

2021年2月2日

下载表格文件弹出选择保存文件路径

摘要： 1.npm安装依赖 npm install vue-json-excel 2.项目主文件入口main.js全局引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel)组件里面 import 阅读全文

posted @ 2021-02-02 19:38 Tsunami黄嵩粟阅读(2061) 评论(0) 推荐(0)

鼠标悬浮显示鼠标停留数据的内容 elementui + vue

摘要：先看效果图直接上代码 <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane :label="speaker.abscissa[0]" name="first"> <div class="list" v-for="( 阅读全文

posted @ 2021-02-02 16:43 Tsunami黄嵩粟阅读(3391) 评论(0) 推荐(1)