React jsx中js表达式
摘要：嵌入JS表达式 在jsx语法中，要把JS代码写到{ }中，所有标签必须要闭合。 let num = 100 let bool = false; // JSX 语法 var myh1 = ( <div> {/* 我是注释 */} {num} <hr /> {/* 三目运算 */} {true ? "条
阅读全文
posted @
2021-02-25 18:49
Tsunami黄嵩粟
阅读(77)
推荐(0) 编辑
React JSX
摘要：由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。 React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合X
阅读全文
posted @
2021-02-25 17:48
Tsunami黄嵩粟
阅读(69)
推荐(0) 编辑
React
摘要：官网：https://react.docschina.org/ React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。 React 拥有较高的性能，代码逻辑非常简
阅读全文
posted @
2021-02-25 15:59
Tsunami黄嵩粟
阅读(271)
推荐(0) 编辑
在webpack中运行vue
摘要：网址：https://vue-loader.vuejs.org/zh/ Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件 安装loader npm i -S vue npm i -D vue-loader vue-template-
阅读全文
posted @
2021-02-25 15:28
Tsunami黄嵩粟
阅读(78)
推荐(0) 编辑
webpack 路径别名与导入后缀省略
摘要：// 解析模块的规则 resolve: { // 配置解析模块路径别名：优点简写路径，缺点路径没有提示 alias: { // 定义一个@变量，可在import引入时使用 '@': path.resolve(__dirname, '../src') }, // 配置省略文件路径的后缀名称 impor
阅读全文
posted @
2021-02-25 15:17
Tsunami黄嵩粟
阅读(322)
推荐(0) 编辑
webpack externals忽略不打入的包
摘要：例如项目中使用从 CDN 引入 jQuery，而不是把它打包进来使用 import $ from 'jquery' webpack.config.js externals: { jquery: 'jQuery' }
阅读全文
posted @
2021-02-25 15:15
Tsunami黄嵩粟
阅读(278)
推荐(0) 编辑
webpack代码分割
摘要：在做一些单页应用中，若不做任何处理，所有项目文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的chunk中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。 实现方案： entry多入口实现分割 optimizat
阅读全文
posted @
2021-02-25 15:07
Tsunami黄嵩粟
阅读(206)
推荐(0) 编辑
webpack tree-shaking
摘要：tree-shaking是webpack中自带的功能，其作用是去除项目中无用代码(一般只的都是自己所写代码)，减少代码体积(涉及到第三方类库,往往不一定有效。) 前提： 必须使用es6模块 开启production环境 在package.json文件中添加了 "sideEffects": false
阅读全文
posted @
2021-02-25 14:48
Tsunami黄嵩粟
阅读(58)
推荐(0) 编辑
webpack js兼容处理
摘要：webpack在不需要引入任何loader可以对于js进行打包处理，但是它不会对于js兼容性进行任务的处理，而我们编写的项目是需要在不同的浏览器中运行的，此时就需要对于js的兼容性在打包过程中进行对应的处理。使用babel来完成对应的js兼容处理 # 早期使用 @babel/polyfill 来完成
阅读全文
posted @
2021-02-25 14:45
Tsunami黄嵩粟
阅读(151)
推荐(0) 编辑
webpack处理静态资源
摘要：像项目中字体资源是不需要进行打包处理的，可以直接的通过复制方式给打包到目标目录中 # 安装 npm i -D copy-webpack-plugin # 引入 const CopyPlugin = require('copy-webpack-plugin') # plugins配置 plugins:
阅读全文
posted @
2021-02-25 14:38
Tsunami黄嵩粟
阅读(158)
推荐(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黄嵩粟
阅读(110)
推荐(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黄嵩粟
阅读(49)
推荐(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黄嵩粟
阅读(108)
推荐(0) 编辑
webpack的基本使用
摘要：在项目根目录下面创建一个webpack.config.js文件，webpack运行的环境为nodejs环境，所以此文件中的模块化规范为commonjs规范写法 // webpack运行node环境的 // 此处的模块化规范为 commonjs规范 module.exports 导出 导入 requi
阅读全文
posted @
2021-02-19 18:08
Tsunami黄嵩粟
阅读(83)
推荐(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黄嵩粟
阅读(149)
推荐(0) 编辑
下载表格文件 弹出选择保存文件路径
摘要：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黄嵩粟
阅读(1943)
推荐(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黄嵩粟
阅读(3216)
推荐(1) 编辑
