- 博客(143)
- 收藏
- 关注
RSS订阅原创 Vue3项目运行Error: Cannot find module ‘vue-loader-v16/package.json‘问题处理
查看这个依赖是在@vue_cli-plugin-typescript这个库中进行引入，大概率fork-ts-checker-webpack-plugin-v5这个是库的作者还在开发当中并没有发布的库。到这里，那么就好解决了，@vue/cli-plugin-typescript版本降级！1）@vue/cli-plugin-typescript降级，降级到～4.4.0版本"@vue/cli-plugin-typescript""~4.4.0",2）安装开发依赖vue-loader-v16。...
2022-07-24 17:32:44
4232
4
原创 微信网页开发：微信内h5使用wx-open-launch-weapp打开小程序，微信内h5使用wx-open-launch-app打开App的方案
微信网页开发：微信内h5使用wx-open-launch-weapp打开小程序，微信内h5使用wx-open-launch-app打开App的方案
2021-11-26 17:04:44
6126
3
原创 vs code使用power mode设置鼠标光标动效
记录一个开发的题外话。vs code编辑器使用插件 power mode来设置鼠标光标动效，如下：1. vscode 安装 power mode插件2. 打开vscode编辑器 文件 - 首选项 - 设置，设置界面开启power mode插件设置插件动效就可以看到对应效果。...
2021-03-31 18:29:33
2169
1
原创 Vue项目优化实践，通过CDN引入依赖项文件，减少打包vendor.js大小
在我们使用vue构建项目时，常有一个问题值得我们思考，我们该如何去减少我们打包出来的chunk大小？以下，是一个项目实例过程。创建vue项目npm init webpack vuepjt在项目不进行任何配置时，直接build，让我们来看看打包出来的chunk大小npm run build --report咋一眼就发现vendor.js有120kb，让我们来看看为什么这个chunk这么大大致分析一下，vendor.js这个chunk中vue,vue-router这两个库占用
2020-08-18 14:01:25
2064
1
原创 使用rollup配置创建libary并发布至npm详尽流程
全局安装rollupnpm install rollup --global终端中使用rollup，如果有信息输出，则说明rollup安装成功。初始rollup创建main.js，并输入以下内容const foo = "hello world."export default function () { console.log(foo)}终端中使用：rollup .\main.js --file bundle.js --format cjs可以发现同级目录中输出
2020-07-21 16:02:42
1182
原创 npm查看包的版本信息，npm查看包的最新版本，npm安装指定版本的包，npm升级指定的包，npm安装最新的包，npm查看已安装的包等等指令
使用npm查看npm包的版本信息如查看webpack的版本列表信息，方式1：npm view webpack versions输出结果方式2：npm info webpack输出结果：使用npm查看npm包的最新版本信息npm view webpack version使用npm安装指定版本的包如安装express 4.11.0版本npm i [email protected] --save-dev使用npm升级指定的包如升级上一步安装的expre
2020-07-08 11:06:17
12602
原创 webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead
在按照官方文档使用webpack内置插件，new webpack.optimize.UglifyJsPlugin(),进行项目打包后，发现如下的错：Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.原因是，webpack在最新版本中删除了optimize内置的方法，需要我们该用其他插件来使用。解决目前遇到的问题，我们需要使用uglifyjs-
2020-07-01 16:54:48
3431
1
原创 npm查看源地址以及更换源地址
NPM概述：查看源地址：npm config get registry设置源地址：npm config set registry https://registry.npm.taobao.org/--------------------------------------------------------------------------------------查看npm源地址npm config get registry输出结果：更换npm源为淘宝镜像//.
2020-07-01 15:09:54
32892
原创 rollup开发依赖包(npm library)，解决引入外部依赖失败的有效方法
在使用rollup进行library开发时，在库文件中使用了url模块，打包之后将生成的文件在项目页面中使用时，发现url竟然undefined。按照网上一堆使用rollup-plugin-node-resolve来解决的方法，发现均无效，目前已查到到有效的方式，使用第三方依赖：rollup-plugin-node-polyfills。1）安装依赖cnpm i rollup-plugin-node-polyfills --save-dev2）配置pluginsimport nodePol
2020-06-28 19:28:28
3771
1
原创 js判断是安卓Android还是ios机型
/** * 判断是否为安卓机型 */export function isAndroid() { let _ua = window.navigator.userAgent.toLocaleLowerCase() if (_ua.indexOf('android') > -1 || _ua.indexOf('adr') > -1) { return true } else { return false }}/** * 判断是否为ios机型 */ex.
2020-06-27 15:14:34
853
原创 如何在Vue中使用sass，以及Module build failed: TypeError: this.getResolve is not a function at Object.loader问题
安装项目依赖：cnpm install sass-loader node-sass vue-style-loader --Dwebpack.base.conf.js配置loadermodule.exports = { module: { rules: [ // ... { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ] },}tem
2020-06-23 13:16:04
377
原创 mac安装HomeBrew异常:error: RPC failed问题解决的有效方式
问题描述在安装HomeBrew时，会遇到下述报错：fatal: unable to access 'https://github.com/Homebrew/brew/': Could not resolve host: github.comFailed during: git fetch origin master:refs/remotes/origin/master --tags --force网上会有很多解决方案，最后问题的指向都是我们无法连接到github.com。可以使用，ping
2020-06-11 14:21:16
1652
原创 修改使用create-react-app创建的React项目本地服务的端口port和host
在使用create-react-app工具构建react项目时，我们可以不用关心项目的配置项。但，如果我们需要同时启动多个react项目时，我们会发现项目端口被占用了，因此我们该如何修改默认端口配置呢？1. 弹出项目配置项在我们构建项目时，使用npm run eject 弹出项目配置项2. scripts文件夹start.js中修改配置// Tools like Cloud9 rely on this.const DEFAULT_PORT = parseInt(process.
2020-06-10 11:12:32
1810
原创 react将文本渲染为html的方式
如下述代码，使用属性：dangerouslySetInnerHTML，将内容渲染为html。import React, { Component } from 'react'class Header extends Component { constructor(props) { super(props) } state= { descTohtml: '<h1>渲染为html</h1>' } render() { return (
2020-06-02 11:38:01
1493
原创 Chrome浏览器安装vue-devtools工具的方法
1）github上下载vue-devtools库，使用git下载git clone https://github.com/vuejs/vue-devtools2）项目根目录下安装项目依赖cd vue-devtoolsyarn run build3）打包之后的扩展程序文件在，packages/shell-chorme文件夹中4）打开chorme浏览器，在浏览器搜索地址输入chrome://extensions/ ，再“加载已解压的扩展的程序”加载刚刚打包出的文件..
2020-05-29 14:35:40
3569
原创 react中使用路由react-router进行页面跳转的方式，以及参数传递方式
方式一，使用withRouter，进行跳转import React, { Component } from 'react'import { withRouter } from 'react-router-dom'import layoutCss from './header.module.scss'class index extends Component { constructor(props) { super(props) } state = { menulis
2020-05-28 14:47:58
1546
原创 如何使用IIS管理器上部署react项目，支持history和hash模式路由部署
在windows上使用IIS管理器可以很方便部署我们的项目文件，前端往往是部署一些静态资源文件。当我们需要部署react项目打包之后的build文件夹中的代码时，我们该如何去操作呢？前期准备本文假设你已具备react的基本使用能力，以及你已经在你的设备上配置好了IIS管理器，并已经能独立创建网站。让我们开始我们的配置吧！修改React项目打包配置1）项目弹出配置npm run eject在webpack.config.js中我们关注一下打包输出文件的公共路径output: {
2020-05-27 10:43:44
4526
1
原创 一文彻底弄明白module.exports和exports的区别
在我们使用nodejs引入模块时，我们往往在模块文件中可能会纠结module.exports和exports他们究竟是什么区别？为了彻底明白其区别，我们来看一个例子。在模块中，只输入下述三行代码：// module.jsconsole.log('module', module)console.log('module.exports', module.exports)console.log('exports', exports)用node运行module.js让我们直接来看输出结果：这
2020-05-25 10:19:55
2788
2
原创 使用create-react-app构建的react项目在IE浏览器打开白屏的问题解决
我们在使用create-react-app创建react项目之后，将项目在IE11/10/9浏览器打开时，发现页面白屏，打开控制台发现如下报错：出现此问题的原因是：create-react-app默认只支持现代浏览器，具体可参考https://create-react-app.dev/docs/supported-browsers-features/支持列表。为了解决支持IE11/10/9...
2020-04-13 09:27:40
1999
原创 react中利用构造函数与利用class关键字创建组件的区别，以及使用的选择
在react中，我们通常在创建组件时有以下两种形式：//class关键字创建组件importReactfrom'react';exportdefaultclassAppDemoextendsReact.Component{render(){return(<div>demo</div>)}}...
2020-02-14 19:07:51
545
原创 npm 运行时报错“因为在此系统上禁止运行脚本”解决办法
在控制台运行npm指令时遇到如下报错信息：“因为在此系统上禁止运行脚本”npm : 无法加载文件 C:\Users\Pathliu\software\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行...
2020-02-13 14:31:56
19029
8
原创 使用vuecli3 构建的项目，修改项目webpack配置
今年vuecli已经升级到了vuecli3+，和以往vuecli构建的项目不同，在新版本的vuecli构建的项目中，默认是无配置文件的。如果我们想修改server的端口号，打包输出文件的资源，我们该怎么处理呢？按照官方文档，https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE我们在与package...
2019-12-02 11:13:42
1334
2
原创 vue3.0项目中eslint检查时，Unexpected console statement (no-console)报错解决
在利用vue-cli3+构建的项目中引入eslint进行语法检查时，使用console.log('xxx')时，控制台抛出了Unexpected console statement (no-console)异常，解决办法是：在项目的package.json文件中，eslintConfig 配置项中的“rules”中新增一条配置项即可"eslintConfig": { ......
2019-12-02 11:03:21
2609
原创 理解js中apply,call,bind的区别
首先我们需要明白的是，apply,call,bind:1）它们三者都可以修改函数调用时this的指向2）第一个参数都是修改后this指向的对象3）都可以在后续参数中进行传参var userFunc = { name: '张三', age: 24, sayAge: function() { console.log(this.name + '年龄是' + this.ag...
2019-08-31 14:55:29
182
原创 Vue项目build打包之后，背景图路径错误问题解决方式
在vue项目中，npm run build之后，得到的项目输出文件部署到服务器之后，图片无法找到，发现是图片路径不对。处理和修改方式如下：index.js中修改// 在index.js中assetsPublicPath: './',bulid文件下，utils中修改// Extract CSS when that option is specified// (which ...
2019-04-25 11:21:17
809
原创 小程序登录机制的剖析
在分析小程序登录机制之前，需要明确几个问题：1. 微信小程序是什么2. 微信公众平台、微信开放平台以及商户平台的区别3. 微信openid与unionid的区别4. 小程序unionid的机制1. 小程序是什么官方给出的解释是：小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。官方的解释过于含蓄，通俗点来说，...
2019-02-24 11:58:30
1058
原创 mac如何安装tomcat并部署vue项目
1. 安装tomcat官网下载tomcat，download目录下，下载对应的tomcat资源文件，下载zip或者tar.gz文件在资源库文件夹下，新建文件夹 Tomcat并将下载的文件拷贝至该文件夹下修改项目文件的读写权限，在tomcat文件夹下打开终端，并执行 sudo chmod 755 /apache-tomcat-9.0.16/bin/*.sh 输入电脑密码...
2019-02-19 11:29:35
640
原创 git提交代码到线上库的详细步骤
在我们使用github作为我们代码管理仓库时，我们需要利用git提交我们的代码到线上仓库，具体提交的方式方法如下：（备注：提交的方式方法不尽相同，但是博主建议按如下方式提交）1. git stash目的是，缓存本地的修改，避免代码同步时候代码丢失2. git pull (或者 git pull 分支)拉取线上代码，与线上仓库保证代码的同步，并解决拉取代码时可能存在的代码冲突3. ...
2019-02-06 21:19:07
2625
3
原创 mac上如何将python2.7修改为python3
mac会默认安装python，默认python的版本为python2.7。但通常我们在使用python的时候会应用python3，如何将我们默认的python环境变量修改为python3？1）打开终端 输入 python -V 可查看mac当前python的版本 // 显示为 python 2.7.xx2）用brew升级python brew upgrade python3）修...
2018-12-12 10:22:31
4600
1
原创 微信小程序开发如何选择获取unionid方案
在微信小程序开发过程中，我们通常有获取用户unionid的需求。首先，何为unionid? 对于这个问题，举个例子，在微信授权的各个登陆应用中，能区分用户唯一的标识就是微信授权用户的unionid。这一点有点类似于用户的微信号，是唯一的。对于如何获取用户的unionid 官方文档给了四种方式（当前时间2018/12/03）：UnionID获取途径绑定了开发者帐号的小程序，可以通过下面 ...
2018-12-03 17:37:15
3469
原创 微信小程序中如何有效的修改app.js中全局变量的值，并能在页面中进行动态响应
提供一种有效的方式，在app.js中定义全局变量，以及获取和修改全局变量的方法如下：let userInfo = { username: test, email: ''}App({ // 获取数据 getUserInfo () { return userInfo }, // 更新用户信息 updateUserInfo (obj) { let ...
2018-11-22 09:34:36
21317
原创 微信小程序点击事件传递参数的方法
小程序在组件上绑定事件后，传递参数的方式不同于前端开发其他场景中直接加参数的方式，小程序在参数的传递时，采用事件对象的自定义属性的方式，具体实现如下：wxml:<view bindtap="passQuery" data-index="1">点击事件传参</view>js中：passQuery: function(e){ // 传递的参数 ...
2018-11-13 13:49:50
68521
3
原创 手机端h5页面利用rem进行适配的有效方案
关于H5页面的适配方案，有很多很多，各种方法有各种方法的优势。在博主做项目的实际开发过程中，常用的方案是利用rem进行适配。具体的适配原理如下：需要明确的一点，各种浏览器对字体默认的大小为16px.通常UI设计师给到前端开发的设计稿是以iphone6 手机大小设计的，前端开发时也是参照iphone页面显示效果进行开发。在开发的前期我们需要对浏览器默认字体的大小进行修改。使得，在页面上设置 ...
2018-10-11 17:28:34
2475
原创 vue项目中富文本编辑器vue-quill-editor的使用
前端开发过程中，会遇到在页面上加入富文本编辑器，在vue项目中开发遇到这一需求的时候，我们可以使用富文本编辑器vue-quill-editor，话不多说，先上一张效果图：1）安装vue-quill-editor 依赖npm installvue-quill-editor --save2）入口文件main.js中引入// 引入富文本编辑器import VueQu...
2018-09-30 15:07:24
4721
8
原创 vue中对数组值变化的监听与重新响应渲染的方法
在我们项目开发过程中，实例中的数据类型可以是对象、数组等。在对象中，某个属性值发生更改时，我们可以通过对象的深度监听，以达到重新渲染页面的需求。或者查阅博主的文章 https://blog.csdn.net/weixin_37861326/article/details/81034231；例如：<script> export default { data(){ ...
2018-09-29 10:32:10
24405
2
原创 vue状态管理vuex使用之项目中如何合理引入vuex
在前端开发过程中，状态的管理是一件很令人头疼的事情。尤其是在项目中，涉及同一状态的组件越多，在组件状态管理上，通过父子组件之间通信来更新状态将变的复杂。Vue项目开发过程中，借助vuex进行状态管理将极大的减轻我们在开发过程中对于组件状态的维护。vuex:vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可...
2018-09-26 11:29:35
1465
1
原创 margin与padding值设置为百分数时，其值的计算参照最近父级元素width
在前端开发过程中，设置样式参数margin 与 padding 值为百分数时，其具体值的计算方法需参照最近父级的width计算。1）exp1: margin-top 为百分数其中标签的嵌套关系为：<div class="boxparent"> 父级box <div class="listbox"> 子box </d...
2018-09-21 14:55:16
1367
原创 Vue项目中如何使用Echarts 及Echarts中echarts-liquidfill水晶球插件
在博主的前述的一篇文章当中，有写到如何在vue项目引入Echarts插件，Echarts插件的应用方法可参考博主之前的文章。在本文中，博主将结合实际开发过程中的操作，介绍一下如何引入echarts-liquidfill插件，并使用它。echarts-liquidfill在github上的链接是https://github.com/ecomfe/echarts-liquidfill，上面有详述插件的...
2018-09-12 14:17:27
19408
1
原创 如何修改input输入框placeholder文字颜色
开发过程中在使用input、textarea标签placeholder作为提示性文字时，往往文字颜色达不到我们的预期效果，因此需要对placeholder属性提示文字默认颜色进行修改，修改的过程也很简单添加样式即可。input::-webkit-input-placeholder { color: #dadada; } input::-moz-placeholder { ...
2018-09-06 11:15:14
14290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人