2020年05月_会做饭的技术男

转载关于vue的npm run dev和npm run build

├─build│ ├─build.js│ ├─check-versions.js│ ├─dev-client.js│ ├─dev-server.js│ ├─utils.js│ ├─vue-loader.conf.js│ ├─webpack.base.conf.js│ ├─webpack.dev.conf.js│ ├─webpack.prod.conf.js│ └─webpack.test.conf.js├─config│ ├─dev.env

2020-05-31 21:06:46 1574

转载 dev-server.js浅析

// 检查NodeJS和npm的版本require('./check-versions')()// 获取配置var config = require('../config')// 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的配置作为当前的环境if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)}// 一个可以调用默认软件打.

2020-05-31 20:03:02 332

转载 webpack.base.conf.js

var path = require('path')var utils = require('./utils')var config = require('../config')var vueLoaderConfig = require('./vue-loader.conf')// 给出正确的绝对路径function resolve (dir) { return path.join(__dirname, '..', dir)}module.exports = {// 配置webpack编译入口 en

2020-05-31 18:33:51 988

转载 webpack.dev.conf.js

var utils = require('./utils')var webpack = require('webpack')var config = require('../config')// 一个可以合并数组和对象的插件var merge = require('webpack-merge')var baseWebpackConfig = require('./webpack.base.conf')// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件var H

2020-05-31 17:03:58 286

转载 utils.js和vue-loader.conf.js

var utils = require('./utils')var config = require('../config')var isProduction = process.env.NODE_ENV === 'production'module.exports = {// css加载器 loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : confi

2020-05-31 15:48:34 153

转载 build.js

// https://github.com/shelljs/shelljs// 检查NodeJS和npm的版本require('./check-versions')()process.env.NODE_ENV = 'production'// Elegant terminal spinnervar ora = require('ora')var path = require('path')// 用于在控制台输出带颜色字体的插件var chalk = require('chalk')// 执行Unix

2020-05-31 14:21:23 224

转载 webpack.prod.conf.js

// 引入依赖模块var path = require('path')var utils = require('./utils')var webpack = require('webpack')// 引入基本配置var config = require('../config')var merge = require('webpack-merge')var baseWebpackConfig = require('./webpack.base.conf')var HtmlWebpackPlu.

2020-05-31 13:07:39 334

转载 check-versions.js和dev-client.js

// 用于在控制台输出带颜色字体的插件var chalk = require('chalk')// 语义化版本检查插件（The semantic version parser used by npm）var semver = require('semver')// 引入package.jsonvar packageConfig = require('../package.json')// 开辟子进程执行指令cmd并返回结果function exec (cmd) { return require('c

2020-05-31 11:04:01 155

转载 config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.var path = require('path')module.exports = {// 构建产品时使用的配置 build: {// webpack的编译环境 env: require('./prod.env'),// 编译输入的index.html文件 index: path.resolve(__dirname, '../dist/index.html')

2020-05-31 09:44:50 182

转载 css常见问题一

【1】禁止换行.class {word-break:keep-all;white-space:nowrap;}【2】强制换行.class{word-break:break-all;}普通容器中（Div）的用法建议word-wrap:break-word;容器中（Div）中的表格的用法建议table-layout:fixed;word-wrap:break-word;【3】hank手法.class {background:#000; background:#06f\9; background:#090\0;

2020-05-31 08:30:56 240

转载一些小总结

1）.margin-top,margin-bottom不能正常显示时一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个 div{height:0;overflow:hidden;}例CSS样式表中：#box {background-color:#eee;}#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}解决方法：在P标签前后各加2个空的div：<divstyle="heig

2020-05-30 19:58:13 295

转载 2017.8.5 浏览器中图片的加载

浏览器加载一个html页面：解析html===》构建DOM树 -----遇到img标签加载图片加载样式===》解析样式 ===》构建样式规则树 -----遇到背景图片链接不加载加载js ===》执行js把DOM树和样式规则树匹配构建渲染树 ----加载渲染树上的背景图片计算元素位置进行布局绘制 ----渲染图片...

2020-05-30 18:57:30 204

转载 2017.9.26JQuery源码解析一架构与依赖

jq1.0： css选择符事件处理 ajax交互1.2.3：引入数据缓存，解决循环引用与大数据保存问题1.3. ：使用全新的选择器引擎sizzle，在各个浏览器下全面超越其他同类js框架的查询速度1.5. ：新增延缓对象（Deferred object）, 并用deferred重写了Ajax模块1.7. ：抽象出回调对象，提供了强大的方式来管理回调函数列表选择器 DOM操作事件 ajax与动画jquery 有13个模块单一职责SRP :ajaxCo...

2020-05-30 17:51:55 140

转载 vue路由传值方式

打印this.$route显示结果：跳转路由传递参数如下this.$router.push({ name: 'Page', query/params: { key: value }）<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>最后在跳转后的路由用 this.$route.params.paramName 和this.$r.

2020-05-30 16:51:13 139

转载 dev-client.js-配合dev-server.js监听html文件改动也能够触发自动刷新

// 引入 webpack-hot-middleware/client var hotClient = require('webpack-hot-middleware/client');// 订阅事件，当 event.action === 'reload' 时执行页面刷新hotClient.subscribe(function (event) { if (event.action === 'reload') { window.location.reload(); }.

2020-05-30 15:44:39 177

转载路由优化

前段时间学习优秀的vue框架学到一招路由优化路由引入很多文件的时候会使页面阅读很不顺畅很累赘其次开发环境与生产环境的引入有时会有很大的不同这时候就可以进行一下配置优化路由 router下配置三个文件index是路由文件其他两个分别是开发环境与生产环境的引入方式开发环境的引入方式是：生产环境的引入方式是：然后在index里引入相应开发环境下的公共方法：组件引入方式是：...

2020-05-30 14:21:32 344

转载 vue-router

router常见参数如下一，mode：hash 与 history hash模式下页面的地址会加上#号更变路由 history模式下路由与平常的页面一样　二， base：应用的基路径，比如整个单页应用服务在/page/app/ 下，那么base就应该设置为 /page/app/. 一般写成 __direname(在webpack中有配置)，当然你也可以写成 /page/app/ 三，引入组件有一种懒加载方式，当访问该页面才会加载相关资源...

2020-05-30 13:08:39 69

转载 vue-router2

六，导航钩子导航钩子函数主要是在导航跳转的时候做一些操作，比如跳转页面之前，进行判断进而选择跳转到哪里钩子函数根据生效范围根据其生效范围可以分为全局钩子函数，路由独享钩子函数和组件钩子函数、全局钩子函数在路由文件里对全局进行拦截数据router.beforeEach((to, from, next)=>{ next();});router.afterEach((to, from, next) => { console.log(to.path)

2020-05-30 11:07:36 186

转载关于vuex状态管理模式架构

一。什么是vuex 集中存储管理所有组件的状态并以相应的规则保证以一种可预测的方式发生变化。例子：实现加减 <p>{{count}} <button @click="inc">+</button> <button @click="dec">-</button> </p>　　const store = new Vuex.Store({ stat...

2020-05-30 09:47:44 111

转载 vue总结

1. vue1.x 到 vue2.x部分区别 1. cli --inline被默认开启 2. contentBase 换成 proxy 3. 减少控制台无用输出比如断开服务器 1.x输出错误信息 2.x输出disconnected 4. 2.0不能以body 和 html 为挂载点使用vue自己的$mount手动挂载 1.0挂载点方式为router.start()2. 动态组件渲染多个组件可以使用同一个挂载点，然后动态地在它们之间切换使...

2020-05-30 08:45:58 90

转载 vue总结2

1. 给router-link添加事件之前用v-link 现在用 router-link 添加事件要用原生的.native修饰v-on<my-component v-on:click.native="doTheThing"></my-component>2.$on 与 $emit3. 跳过css检测v-bind:css="false"4. key值绑定实现数据变化重新渲染整个元素场景：比如父组件控制子组件重新渲染5. ref标记组件6.render函数...

2020-05-29 20:25:30 131

转载 vue 内引入jquery

1. npm i jquery -- save2.import $ from 'jquery'window.$ = $window.jQuery = $export default $这时运行 jq效果可以实现但eslint会报错会说$ 没有定义或者在组件内直接引入import $ from 'jquery'3 . 在.eslintrc.js中 env对象中添加env: { browser: true, jquery: true },这样在开发环..

2020-05-29 19:24:21 465

转载 vue内引入jsPlumb流程控制器（一）

1. npm i jsplumb --save 注：jsplumb要全小写2. 在main.js内加：import jsPlumb from 'jsplumb'Vue.prototype.$jsPlumb = jsPlumb.jsPlumb3. 组件内访问 jsPlumb只有等到DOM初始化完成之后才能使用，因此我们在以下代码中调用jsPlumb方法this.$jsPlumb.ready(function(){ ···});//orthis.$jsPlumb.bi...

2020-05-29 18:18:46 995

转载 jsplumb流程器使用2

jsplumb默认注册在浏览器的窗口，为整个页面提供静态实例1. 单独实例化的方法：var firstInstance = jsPlumb.getInstance();内部传入可定义对象全局定义对象方法： jsPlumb.importDefaults({···})2. 每次连线，都会导致相关联元素重绘，加载大量数据时比如执行批量导入切换视图可以先暂停绘图：jsPlumb.setSuspendDrawing(true);jsPlumb.setSuspendD...

2020-05-29 16:52:37 650

转载 jsplumb流程器使用3--connector

jsPlumb.getInstance内可以放一个对象对象内可选地提供默认值：connector: 连接器（直线--a straight line，贝塞尔曲线--a Bezier curve， “流程图”--"flowchart" “状态机” --"state machine"）默认贝塞尔Connector: ['Bezier', { curviness: 50 }], Bezier： ----curviness ：默认为150 定义...

2020-05-29 15:32:11 1066

转载 jsplumb踩坑

一，，关于连线器label 我们全局设置中可以用 getInstance 实例化新对象也可以通过importDefaults 实例化新对象当我想要给连线器上添加标签每个连线器上的标签都不一样用 getInstance 会导致删除节点时节点有关连线用jsPlumb.removeAllEndpoints(id)无法删除跟此id有关的连接线而且importDefaults 可以在每一小部分可以改变其中一小部分的默认设置二，，删除单条连接线网上寻找...

2020-05-29 14:29:14 1274 1

转载 qrcode生成二维码插件

今天我要和大家分享的是利用qrcode来生成二维码。首先要使用qrcode就需要引用文件，我这边用的是1.7.2版本的jquery加上qrcode<script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript" src="jquery.qrcode.min.js"></script>引入文件后我们就可以生成一个I love yo

2020-05-29 13:11:21 569

转载利用Google浏览器调试js代码

1.js有两种引入方式，外链和内嵌；内嵌在浏览中直接调试，外链要在断点处写debugger;示例代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js简单调试</title> 6 </head> 7 <body> 8 <script type="text

2020-05-29 11:30:49 238

转载 webstom,zencoding,windows快捷键

1、webstorm快捷键：IntelliJ-Idea 的快捷键Ctrl+/或Ctrl+Shift+/注释（//或者/*…*/）Shift+F6重构-重命名Ctrl+X删除行Ctrl+D复制行Ctrl+G查找行Ctrl+Shift+Up/Down代码向上/下移动。F2或Shift+F2高亮错误或警告快速定位写代码，按Tab生成代码选中文本，按Ctrl+Shift+F7高亮显示所有该文本，按...

2020-05-29 10:08:57 192

转载实现表格的增加，删除，复制，克隆

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>操作表格</title> <script> function append() { var thirdtr=document.getElementById('thirdtr'); var paren.

2020-05-29 08:39:01 196

转载订单删除，增加订单，巩固表单特定用法

方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { text-align: center; } </style> <script>

2020-05-28 19:42:46 399

转载完整的订单操作小程序（增加订单，删除订单，修改订单数量）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { text-align: center; } </style> <script> funct.

2020-05-28 18:32:41 3283

转载一些个人感觉很不错的特效

手机app我的贷款申请列表页面模板https://www.mk2048.com/demo/demo_target_desc.php?id=hhhkb022jb金融理财手机APP贷款申请列表页面模板，个人贷款申请服务列表手机模板。html5 canvas圆点发散动画特效点击》html5 canvas圆点发散动画特效canvas绘制跟随鼠标的圆点粒子发散动画特效。简单的抖音官网mp4视频背景模板https://www.mk2048.com/demo/demo_target_desc.php?id=hhiaiba

2020-05-28 17:31:21 444

转载这些特效对于学习前端我们很有用

简单的手机商城详情页模板https://www.mk2048.com/demo/demo_target_desc.php?id=hhh1bijbab手机商城商品详情页和订单详情页模板，微信付款页面模板总共3个手机页面。黑色的艺术设计师作品展示html5模板https://www.mk2048.com/demo/demo_target_desc.php?id=hhh1ci2ihjOreo是一款艺术设计师网站HTML5模板。简单、干净的设计基于Bootstrap3框架开发。使用Oreo可以快速创建独特的网站根据

2020-05-28 17:20:47 284

空空如也

空空如也