liznbin-CSDN博客

原创 element表格(table)的二次封装

element的这个ui框架其实已经满足了大部分需求，个人感觉比较好用。那么，为什么需要再次进行二次封装呢？其实，在项目中很多页面或者是某个功能基本类似的，那么就可以单独封装成一个公共的组件，把需要的值传出来。然后把这个公共的组件引入需要的父组件里。在传入想要的值（数据），这样开发效率会提升很多。又啰嗦！代码示例：公共组件（定义为mTable）<template> <div> <el-table :data="tableData" style="w

2020-06-10 23:16:24 1647

原创 uni-app请求封装

ajax封装在src下创建文件夹，如uilts文件夹创建request.js文件。用于封装ajax请求request.js代码如下:export default function(url,data={},method="GET"){ // 发起请求 uni.request({ url, data, method, success:(res) => { console.log(res)

2020-05-30 23:56:28 1117

原创复制到剪切板功能

通过利用npm 第三方插件库，安装如下 npm install vue-clipboard引入，注册 — main.jsimport VueClipboard from "vue-clipboard2";VueClipboard.config.autoSetContainer = true //解决模态框（弹窗组件失效）Vue.use(VueClipboard)组件：<template> <div> <el-form :label-positi

2020-05-12 17:15:46 227

原创 webpack开发环境基本配置--总结篇

前面已经将html，css，图片，其他资源打散讲，这篇是将前面打散的知识点归纳成一篇。直接敲代码吧~~webpack开发环境基本配置代码如下：/*开发环境配置创建webpack配置工具npm init ->输入名称 ->一直回车npm i webpack webpack-cli -gnpm i webpack webpack-cli -D*/const { re...

2020-04-11 00:31:34 182

原创 webpack基本配置--devserver

devserver可以想象成开发服务器，那么它的作用是什么呢？自动化（自动编译，自动打开浏览器，自动刷新浏览器）由于配置需要测试一些内容，我引用上篇的其他资源打包的例子，继续配置关于devserver的几行代码devserver配置如下述代码：const HtmlWebPackPlugin = require('html-webpack-plugin')const { resolve...

2020-04-10 23:54:55 132

原创 webpack基本配置---其他资源打包

之前，已经打包了html，css，图片这些。其他的资源例如icon图标怎么打包呢？那么接下来直接上代码~~下述代码是打包其他资源配置:const HtmlWebPackPlugin = require('html-webpack-plugin')const { resolve } = require('path')module.exports = { entry: './src/i...

2020-04-10 23:38:59 169

原创 webpack基本配置---图片资源打包

在webpack打包图片资源的时，先说下的它的优缺点以及一些小问题优点：减少请求数量(减轻服务器压力)缺点: 图片体积会更大(文件请求熟读更慢)小问题: 我们一般可以利用css中的background-image:url()引入图片，以及在html中直接通过img标签直接将图片引入，而待会会运用到loader将解决这些问题，从中会运用到’url-loader’，‘html-loader’...

2020-04-10 17:24:30 1324

原创 webpack基本配置--html资源打包

这次，我就不安装步骤了。需要的话看我上一篇css资源打包文章.具体文件目录如图:这次是打包html文件资源，所以不需要用css样式，只需要在src下创建入口文件以及待会要测试的html文件，html文件随便写一些东西就行，不须纠结在webpack.config.js进行配置如下const { resolve} = require('path')const HtmlWebpackPl...

2020-04-09 18:50:53 607

原创 webpack基本配置--样式资源打包

针对上篇文章有基本的了解之后，那么对于怎么配置，话不多说~~开始安装基于webpack开发项目npm init (初始化项目)npm i webpack webpack-cli -g (全局安装webpack和webpack-cli)npm i webpack webpack-cli -D在安装的过程中需要输入项目名称，输入你的项目名称之后，一直回车到结束即可...

2020-04-09 17:29:35 319

原创 webpack理解

写一篇关于webpack的基础文章，希望对刚刚入门的同学有用~~话不多说，开始webpack的理解是一种前端资源构建工具，也是一种静态模块打包化工具webpack的五个核心概念Entry入口(Entry)指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图Output输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名Lo...

2020-04-09 16:31:49 99

zhangzhangyp的博客