- 博客(129)
- 收藏
- 关注
RSS订阅原创 阿里云上linux服务器安装tomcat及vuepress2搭建博客部署
2.将下载好的 jdk-linux-x64.tar.gz、apache-tomcat-8.5.78.tar.gz 使用。2.解压apache-tomcat压缩包并移动到tomcat文件夹下。1.具体的实名认证和备案流程可去官网文档查看 （此处忽略）白嫖了试用期的服务器玩了一阵子，重新购买一个服务器。传输到服务器上，首先进行对java环境的配置。访问你的公网Ip地址：8080端口。配置参数：1核2G 贷款1M。1.新建tomcat文件夹。登录方式：1.远程登录。4.启动显示ok成功。看到下面页面显示成功。
2023-08-31 10:47:33
203
原创 element-ui分析
用于生成../../examples/icon.json,解析icon.scss, 把所有的icon的名字放在icon.json里面,遍历名字显示icon(不用每次添加了icon就要修改example)src/index.js 把所有的组件统一导出. (这个index.js 是通过node build/bin/build-entry.js生成的),通过脚本命令去生成,不用每次新增一个组件就修改一下.开启某个组件的开发模式，在这里可以单独开发某个组件，目录examples/play/index.vue。
2023-08-29 17:40:40
622
原创 如何写一个ts版的工具库
号称webpack下一代的打包工具。Webpack构建后除了业务逻辑代码，还包括代码执行引导及模块关系记录的代码，Rollup构建后则只有业务逻辑代码，构建体积占优，总结就是开发库或框架使用Rollup，其他场景Webpack。rollup是天然支持tree shaking，tree shaking可以提出依赖模块中没有被使用的部分，这对于第三方依赖非常有帮助，可以极大的降低包的体积。Rollup仅支持ES6模块，在构建代码时，在使用ES6模块化的代码中，会对你的代码进行静态分析，只打包使用到的代码。
2023-08-29 16:56:27
184
原创 vue h5项目 打包&&加载优化
1）npx browserslist@latest --update-db 更新去除警告2）打包进度条npm i speed-measure-webpack-plugin -D 安装打包优化分析插件得到所有打包文件耗时：2.添加 cache-loader基本主要是在cache-loader上比较耗时,提升方法添加cache-laoder初次打包时间： 5分钟打包瘦身：11M=>72kbvue-cli3压缩图片配置为模块提供中间缓存步骤。
2023-08-29 16:54:53
1297
转载 多个提高前端工作效率的 VSCode 实用插件
酷扯儿「来源: ｜编程微刊 ID：wangxiaoting678」转自：秦爱德juejin.cn/post/6908497610311467021海阔凭鱼跃，天高任鸟飞。Hey 你好！我是秦爱德。平平无奇上班摸鱼，甚至想着如何带薪拉屎？不不不，今天我们来聊聊vscode中那些提高工作效率的实用插件吧。咱们也不能一天天光摸鱼，还是得干点正事。特此，我整理了一些好用的vscode插件，如果觉得不错，欢迎一键三连，你们的点赞，就是我持续写文最大的动力本文从基础必备、代码规范、开发神..
2022-05-04 15:17:00
1333
原创 Xshell 连接阿里云使用秘钥
前言：最近在玩一个前后端的项目，所以又开始拾掇自己的薅羊毛的阿里云服务器了。自己的mac 上已经用了密钥登陆比较方便，pc一直没设置，分享一下简单的操作流程。1.首先你要有阿里云服务器，pc本地下载Xshell 客户端，然后就是傻瓜式额配置就好了。2.点击Xshell新建，填名称（自定义），主机（实例的公网IP地址）3：输入用户名（一般是root），密码（自己设置的）4：输入登录用户名5：使用秘钥，要登录阿里云配置秘钥6：生成秘钥，一直下一步就好了，直到保存文件秘钥
2022-02-22 22:56:34
1833
原创 electron 踩坑小记
1.npm install -g electron 遇到的权限问题设置安全模式npm install -g electron --unsafe-perm=truenpm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。这样的话如果你脚本里有一些需要权限的操作，比如写文件（尤其是写 /root/.node-gyp），就会崩掉了。为了避免这种情况，要么按照 npm 的规矩来，专门建一个
2021-08-11 11:16:58
252
原创 初见electron
学习意义：1.夯实前端开发基础2.深入浅出Node.js3.浏览器工作原理（chromium--1.main proces 2.render process）4.Electron API 应用前期准备：node.js>8.0 electronElectron继承其来自Chromium的多进程架构，这使得框架在结构上与现代网络浏览器非常相似。按照官方文档：可以快速的生成一个Hello World桌面ying# 克隆示例项目的仓库 $ git clone https
2021-08-11 11:03:48
393
原创 table合并单元格
遇到这种设计，记录一下<el-table :data="tableDataNew" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"> <...
2021-08-11 11:00:33
3801
原创 手写vue实例中对数组拦截
在上一次的代码中，对于监听vue data 的构造函数里，对于数据的劫持，没有对数组进行特殊处理，那么出现的比较头疼的是，在实际开发中，是不对数组进行索引操作的，但是之前所定义的类是采用递归的思想对数据进行劫持的，如果出现数组数据量比较大，或者出现层级比较深的数组和对象互相包括的时候，这个时候是十分消耗性能的或者直接卡死。所以对于数组我们可以采用继承原有方法的基础上进行方法重写：添加array.js方法进行重写index.html呈现方式index.html对比得
2021-07-30 17:06:16
259
原创 手写Vue入口及实例
前言：在开始之前，我首先是问了自己vue 到底是个啥？我的潜意识觉得他就是一个为了更加快速的搭建UI而成的基于javascript上的一个渐进式框架之前觉得其是一个MVVM现在才知道Vue并不是一个纯粹的MVVM框架，只是在发展的长河中，借鉴了MVVM的设计模式1.MVVM什么是MVVM前提是只在数据改变的时候去更新视图层，视图层改变，数据改变，比如说form表单但是在vue中存在一个不符合如此规则的现象，就是$ref这是通过ref句柄对dom直接进行操作的，所以严格意义上来说，他不属于一个
2021-07-30 17:04:40
235
2
原创 知识点四：数据变更的监测方法
具体落实到 JavaScript 的技术上时，开发者会发现 JavaScript 在 ES6 之前并没有提供开箱即用的数据变更监测机制。这就使得开发者/框架只能自己提供一种可靠的机制来监测数据变更。JavaScript 曾有过Object.observe()的提案，并且 Chrome 有实现过该方法。该方法会监测数据的变动，然后触发回调。但因为一些原因，后来该提案被取消。ES6 ProxyES6 提供了Proxy，顾名思义，它可以为任何一个对象设置一个代理对象，并在代理对象中设置一些自定义的逻辑
2021-07-30 17:00:52
457
原创 知识点三：JavaScript 中的类和 Mixin
JavaScript 是一种弱类型的语言，且函数是一等公民，因此在代码的组织上非常灵活，有非常多的方法可以实现代码的复用。“函数是一等公民”的意思，即函数和其他的类型一样，并没有什么特殊。因此在 JavaScript 中，函数可以和其他类型的数据一样，被当成值返回、被当成参数传递、被不同的变量赋值/引用等。具体到代码复用方面，在 JavaScript 中被使用最广泛的就是类和 Mixin。JavaScript 中的类类，即 Class，在 Java 等语言中，类是最基本的概念，所有的代码都要
2021-07-30 16:58:20
190
原创 知识点二：组件化
在前文介绍 Vue 的时候，提到过一些组件化的好处：能让 web 前端代码也实现“高内聚 低耦合”，使得前端开发的过程变成搭积木的过程。web 领域的前辈们在组件化的概念落实中进行过非常多的尝试。例如 ext.js 之类的框架在组件化方面做得非常深入，但因为种种原因，受众有限，最终没有大规模地流行起来。jQuery 插件体系也算是一个比较庞大的组件化生态系统了，但 jQuery 对插件的支持并没有从组件化方面去着手考虑，只是因为插件需要被复用，因此被强制将所有逻辑打包到同一个插件中，被迫变成了一个“
2021-07-30 16:57:18
237
原创 知识点一：数据驱动
前端框架发展到今天，已经出现了很多被广泛认同的理念，也可以叫作它们的特征。在所有的特征中，最具代表性的特征之一即是数据驱动。用户交互的对象——界面不论 web 应用的内部逻辑如何组织，最终与用户产生交互的仍然是界面（User Interface，简称 UI）。对 web 应用来说，界面则主要由 DOM 元素来呈现。因此，归根到底，为了让用户通过 web 应用完成操作，DOM 元素需要根据实际需要来不断变化。例如，用户通过我们的页面来查询当天苹果的价格，页面上有一个“查询”按钮，还有一个显示苹果价
2021-07-30 16:55:47
1935
原创 vue源码分析之vue实例
Vue 在使用时都是以实例为单位来初始化运行，从我们最熟悉的根组件（const app = new Vue()）到自定义组件，在运行时都是一个个 Vue 实例。因此要理解 Vue，就需要首先理解 Vue 实例。在实际开发过程中，我们可以用 Vue devtools 来查看 Vue 实例的结构：在这个例子中我们定义了一个组件 Hello，然后将它从 app 根组件中进行挂载，最后将 app 挂载到#app 上。在 Vue devtools 中可以清晰地看到两个 Vue 实例，且可以查看实例
2021-07-30 16:54:08
422
1
原创 vue源码分析之入口文件
不要急，我们首先从 core/instance/index.js 的上一层封装看起。Vue 全局 APIVue.js 首先在 core/index.js 中，对 Vue 构造函数做了一层包装，这个包装的作用，主要是提供一些全局 API：而 initGlobalAPI 则为 Vue 添加了如下成员：Vue.config Vue.utilVue.set Vue.deleteVue.nextTick Vue.observableVue.options Vue.useVue.mi
2021-07-30 16:52:57
333
1
转载 移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置
移动端适配，目前自己常用的两种 方案，参考以下两篇好文方案一：使用lib-flexible包使用flexible包方式，安装lib-flexible 包和 px2rem-loader包npm install --save-dev lib-flexible px2rem-loader在需要的js文件中头部引入，如果是vue项目就引入到main.js中：import 'lib-flexible'webpack配置loader，注意顺序很重要，顺序不对会出错{ test: /.
2021-06-30 16:55:57
550
原创 重装nvm&&小坑
人物安装的场景：学些Electron 发现node版本导致了报错，索性删除了node ,准备重新安装，之前安装nvm版本管理失效了，好像很久的事情了，然后挣扎了一下，开始安装之路，然后坑就来了。安装前，需确保没有node环境,有的先卸载和删除一下1.brew安装命令：brew install nvm2.安装完成后需要在 .bash_profile 文件添加下面该行，配置环境变量：source $(brew --prefix nvm)/nvm.sh3.完成后，重新加...
2021-06-09 16:57:16
848
原创 SqLite3基本操作
嵌入式开发数据库：SQLite, FireBird, eXtremetDB,3万行的基于c和c++的源码,SQLite数据库，是一个非常轻量级自包含(lightweight and self-contained)的DBMS，它可移植性好，很容易使用，很小，高效而且可靠。SQLite嵌入到使用它的应用程序中，它们共用相同的进程空间，而不是单独的一个进程。从外部看，它并不像一个RDBMS，但在进程内部，它却是完整的，自包含的数据库引擎。嵌入式数据库的一大好处就是在你的程序内部不需要网络配置，也不需要管.
2021-06-08 16:02:32
5700
原创 Centos使用yum快速安装Node和NPM
安装第一步curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -控制台输出：安装第二步yum install -y nodejs 控制台输出：查看版本号：node -vnpm -v控制台输出： 记录一下，积累点滴。...
2021-01-05 10:43:57
1003
原创 网易七鱼客服对接记录以及Vue项目里使用
网易七鱼客服对接记录之前是腾讯客服，因为业务关系，变更到七鱼，所以在这里记录一下1.第一步去http://help.qiyukf.com/官方注册一个账号2第二步找到自己需要的业务，我的是现在系统人工客服官方提供的文档是两种，我的是自定义7鱼客服入口属于异步加载。所以我的代码是第一种。<script> (function (w, d, n, a, j) { w[n] = w[n] || function () { (w[n].a = w[n].a |
2020-11-17 10:59:26
2379
4
原创 windows 运行vue项目 打开地址为 http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 127.0.0.1:8080 可正常打开。
windows运行开发模式命令 npm run dev，启动后默认自动打开浏览器，但是打开地址为 http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 127.0.0.1:8080 可正常打开。每次手动更改不是办法，所以需要调整下代码，能够自动打开后就能正常访问。...
2020-09-27 16:38:22
15779
1
原创 nrm工具，管理npm源
推荐一个nrm工具，管理npm源安装：npm install nrm -g查看npm源：nrm ls使用npm源：nrm use taobao添加npm源：nrm add anxin http://172.16.101.98:4873/切换npm源：nrm use anxin删除nrm源：nrm del anxin新增npm用户：npm addUsernpm登录：npm loginnpm发布：npm publishnpm卸载：npm unpublish [<@scope>/.
2020-06-29 17:53:20
185
转载 一名【合格】前端工程师的自检清单
前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。这样是一个非常真实的现状，实际上很多前端开发者都是自学甚至转行过来的，前端入门简单，学习了几个API以后上手做项目也很简单，但是
2020-06-29 11:56:57
581
原创 双~的用法
export function getPosWithEdge (pos, targetSize, parentSize) { let tempPos = { top: pos.top, left: pos.left, }; let selfHalfWidth = ~~(targetSize.width / 2); let selfHalfHeight = ~~(targetSize.height / 2);}1.~~它代表双非按位取反运算符，如果你想使用比Math.
2020-06-10 11:27:50
205
转载 VSCode-老项目加入eslint + prettier
0. 安装插件eslint perttier -code formatter1. 在项目中安装eslintnpm install -D eslint2. 项目中初始化eslinteslint --init之后会出现一些询问：eslint --init 做了什么？生成eslint配置文件【与上述选项相关】module.exports = { env: { browser: true, es6: true }, extends: ['.
2020-06-08 10:09:46
638
原创 vscode自定义vue模版
第一步：在vscode里面下载Vetur这个插件安装一下安装过的请忽略第二部步：在code->首选项->用户代码片段这是选择之后的页面：下面进行配置模版的内容可以自己多定义一点，按需定义，比如说生命周期和其他的计算属性等等。。。。。希望对新手可以有所帮助，在此记录一下。...
2020-05-21 09:36:17
254
原创 手机访问本地静态页面或项目多种解决方法
在项目开发中一般编写移动端的项目需要手机进行调试和适配。那么怎么怎么访问本地开发的静态html。其实都是为了启一个服务。方法一：1安装服务器环境：如wamp、appserv等集成环境2将项目搬到www文件夹里面（一定不要用中文命名）3选择第二个行的ip地址注意：手机wifi一定要在同网段的连接，否则访问出错方法二：1.安装nodejs环境，官网地址最新版本下载地址即可2.在所在的项目下输入命令：npm/cnpm install anywhere -g；3.node..
2020-05-09 15:47:21
1394
原创 pdf H5 适用于(vue)
之前记录过一篇查看pdf的npm方法，但是在移动端去查看，翻页去加载的时候会出现卡顿，发现pdfh5用户体验会更加友好。推荐一下：import Pdfh5 from "pdfh5";export default {name: 'App', data() { return { pdfh5: null }; },mounted()...
2020-04-21 14:03:28
2167
原创 vue h5 页面标题，页面数据缓存问题
问题描述：每个页面的title更改路由：h5部分页面不需要数据缓存import Vue from 'vue'import Router from 'vue-router'Vue.use(Router);const myComponents = { Login: r => require.ensure([], () => r(require("@/vie...
2020-04-14 13:42:43
584
1
原创 H5页面，调用软键盘搜索功能和关闭软键盘
需求：搜索功能，要求使用手机软键盘弹起搜索<form action="" @submit.prevent="search"> <input class="search-input" type="search" placeholder="搜索姓名、身份证号、工厂名称" v-model="searchVal"></form>type=sear...
2020-04-12 18:40:37
1419
转载 GitKraken使用指南
GitKraken使用指南一名合格的程序员对Git的熟悉是必不可少，当然Git的使用其实不需要GUI工具就能够很好的运用了，GitKraken软件这个功能就是简单容易上手，非常的强大。【使用指南】 如何在Cooding平台使用 在这里将你自己的Clone URL 粘贴进入。 然后输入Cooding的账号密码即可，操作简单，老少皆宜。 clone 项...
2020-04-08 10:16:05
1735
原创 JavaScript(2) 类型、值和变量
JavaScript的数据类型分为两类：1.原始类型（primitive type）和对象类型（object type）原始类型里面包括：1.字符串 2.数字 3.布尔值 4.null 5.undefined对象（object）是property的集合，每个属性都由'名/键值对'。其中一个比较特殊的对象是全剧对象--global object.普通的javascript对象是...
2020-03-29 11:03:10
205
原创 Mysql基本操作记录
1.查看数据库版本：指令：select version();2.查看存在的库：指令：show databases；3.查看用户指令： select user();4.创建库指令： create database dyy; // 建立名字为dyy的数据库5.删除数据库指令： drop database dyy; // 删除名为dy...
2020-03-27 16:29:41
198
转载 在阿里云的centos7上安装mysql5.6的方法
阿里云的商业化产品现在使用的不少，使用阿里云的ECS安装mysql就变得很普遍。今天来讲一下在阿里云的centos7上安装mysql5.6的方法。1 下载直接使用yum命令下载mysql5.6来进行安装是不能成功的，安装过程会有问题，这里我们需要使用rpm命令来先进下载。下载路径为：http://dev.mysql.com/get/mysql-community-release-el7-5....
2020-03-27 15:40:05
175
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人