- 博客(19)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Workspaces can only be enabled in private projects.
出现这个错误是因为你使用了yarn的workspace，但并未将工程标记为private。// 在以下代码中添加private字段，并设置为true，即可。{ "name": "test-workspace", "workspaces": [ "packages/*" ],+ "private": true, "version": "1.0.0", "main": "index.js", "license": "MIT"}究其原因，看官网解释：They h
2021-02-27 09:06:54
8114
原创 yarn workspace的原理剖析以及简单使用
随着项目的不断增大，子项目拆分的越来越多，开发过程可能会遇到如下的两个问题：多个项目具有相同的外部依赖，导致重复安装，占用磁盘空间多个项目之间相互依赖，依赖之间的更新流程繁琐（需要发布到npm，或者使用npm link）开源社区中有lerna这样的优秀的monorepo管理工具来解决这两个问题。但其实，这应该属于npm包管理工具自身的问题范围。所以作为后起之秀的yarn，就希望能够通过其原生的workspace去解决这些问题：下面是一个基于yarn workspace测试项目的目录结构，可以看出
2021-02-20 12:40:29
2794
原创 Computed property was assigned to but it has no setter
Vue中，计算属性默认只有getter，如果你在代码中尝试给你计算属性赋值(需要setter)，那么就会有如上的错误，即计算属性相当于是只读的。// 以下计算属性只用getter。即只能读取foocomputed: { foo() { return 'hello' + this.bar; }}// 尝试给foo赋值，会给出Computed property "foo" was assigned to but it has no setterthis.foo = 'hello baz';
2021-02-19 14:43:56
1557
原创 No package nginx available
执行yum install nginx 报出标题中的错误，翻译为：没有Nginx包其实yum安装会先到yum源中去下载，若没有发现对应的软件包就会出错。可以通过如下命令来安装EPEL的源（生产环境请谨慎…）：$ yum -y install epel-release之后再次执行即可$ yum -y intall nginxEPEL (Extra Packages for Enterprise Linux ) 是 Fedora Project 为RHEL提供的附加的packages。 简单来说
2021-02-18 16:59:05
2945
原创 mac下切换node版本管理n模块的源
n模块可以方便的切换node的版本，然后使用官方源速度有些慢。官方提供了更换源的方法如下：# 设置环境变量export N_NODE_MIRROR=https://npm.taobao.org/mirrors/node# 切换node的版本$ sudo -E n stable其中-E参数是指保留当前的环境变量。否则root用户仍旧拿不到N_NODE_MIRROR的环境变量。更多详情，可以参考这里...
2021-02-17 19:26:17
1761
1
原创 波浪号~@在vue项目中的作用，以及静态资源引用的几种方式
在vue单文件组件中，有一套自己的处理静态资源路径的逻辑。其包含了四种引用方式：绝对路径相对路径~开头的模块@开头的模块~开头的引用并非一个别名，而是可以将~后边的内容当做一个模块请求被解析，所以其后边甚至可以放一个node模块，进而实现更高级的功能（见下文），实现这一功能的是vue-loader，在vue-cli项目中已经内置了。@则是一个真正的别名，可以通过vue inspect命令查看当前webpack的配置：# 以下可以看到 @ 是一个别名 alias: { '@':
2021-02-16 21:07:09
1954
1
原创 this.getOptions is not a function
该错误是css预编译的loader与webpack 4 不兼容导致的。尝试升级到webpack 5 或者降级sass-loader / less-loader / postcss-loader 的版本号到上一个主版本号。比如：# 移除sass-loader@11yarn remove sass-loader -D# 安装上一个主版本的sass-loaderyarn add [email protected] -D...
2021-02-16 09:52:02
13511
原创 ESLint: Use the global form of ‘use strict‘.
该错误提示你：配置了js需要使用严格模式的eslint规则，但代码中并声明严格模式，即use strict;一般这个问题出现在node.js的代码中，因为node.js代码使用commonjs的规范。如果想使用严格模式，需要手动声明："use strict";// strict modefunction foo() { // strict mode}// 或者在函数每部声明function foo() { "use strict"; // strict mode
2021-02-15 12:39:28
1383
原创 前端单网页应用history下配置nginx路由
单网页应用中，页面只有一个index.html的入口文件。如果使用history模式，对于不同的url我们希望最终都可以访问到index.html。一般公司都会使用nginx作为其对外的服务器。在vue-router的官网上，实际上已经写出了如何配置：location / { try_files $uri $uri/ /index.html;}可是看起来不那么好懂，我用简化配置：location / { try_files c.html b.html a.html defult.html
2021-02-08 22:03:00
986
原创 图文讲解flexbox 布局 以及几个高频度属性的深度剖析。
文章目录display: flexflex-directionflex-growflex-shrinkalign-itemsjustify-contentflex布局中，涉及到的CSS属性以及对应的值还是非常多的。但实际应用中，其实只要掌握几个重要的核心属性就可以应付95%以上的场景了。这些属性如下：display: flex这个是必须的，但值得注意的是，当声明了容器为flex布局之后。容器内的原有的布局，比如基于BFC和浮动的Layout布局就不起作用了。下图：两个浮动元素下图：当使用flex
2021-02-08 11:23:00
165
原创 TypeScript-Lookup Types - Cannot access ‘xxx‘ because ‘xxx‘ is a type, but not a namespac
如果我想希望使用某种类型声明的子类型作为某个变量声明的类型…export interface Car { Name: string; Speed: number; Manufactured: number;}const Speed: Car.Speed = 200;上面的写法会抛出错误Cannot access ‘Car.Speed’ because ‘Car’ is a type, but not a namespace. Did you mean to retri
2021-02-06 21:08:20
274
原创 eslint的几种检测级别-syntax、problem、code style
JS作为一门动态类型的语言，在给开发者带来便利的同时，也不可避免的引起一些潜在问题。简单来说，它需要你在编程的时候充分的了解当前对象是否有你要使用的方法或者属性。然后人脑毕竟是有限的。所以就需要一些手段帮你找到潜在的问题。这种手段分为两种：类型检查，也即是TypeScript做的事问题（problem）检查，eslint做的事举个例子，下面的代码展示了二者对各自认为有问题的地方做出提示。// TS 报错 This expression is not callable.// 但eslint则认
2021-02-06 14:22:31
1808
原创 [vue-router] uncaught error during route navigation
vue路由在加载组件之前会执行一些逻辑，尤其是生命周期的钩子函数如果你在以上的钩子函数中，写了自己的逻辑，并报错了。就会触发[vue-router] uncaught error during route navigation这个错误。原因是vue进行了try catch，会捕获到代码执行过程中的错误。所以检查一下你的控制台有没有报错。先解决报红的错误，然后这个警告就自己消失了。...
2021-02-05 18:39:34
33283
5
原创 git常用命令与概念汇总
设置记住用户名和密码# --global如果不加则只针对当前项目# 设置之后需要重新pull一下代码，然后提示输入用户名密码后会自动保存，从而实现记住用户名和密码的目的。# 这样设置的用户名和密码是以明文的方式存储的。比如你安装了一个Npm包，这个包有可能有权限读取这个文件。git config --global credential.helper store...
2021-02-05 14:27:44
150
原创 从类型系统看TypeScript中 interface与type的区别
文章目录前言使用上的区别本质区别参考文档前言在TypeScript中，有两中声明类型的方式。即Interface与Type，那么为什么会需要两个API呢？interface X { a: number b: string}type X = { a: number b: string};上面两种方式均可，所以很让人困惑，到底他们的区别是什么？什么时候该使用type，什么时候该使用interface？使用上的区别可能这个问题实在困扰人，所以TS的官方
2021-02-05 10:39:44
953
原创 vue中v-model的白话讲解 & 在自定义组件中定义自己的双向数据绑定
v-model原理你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。以上是官方的讲解，其实就是v-bind与@input语法糖而已。如下图：正是通过v-bind指令将响应式的数据绑定到文本框上，之后再给文本框添加input
2021-02-04 14:05:15
282
原创 json-server和她的RESTful API
在前端领域，经常会对后台数据进行Mock，即模拟假数据。因为前后台往往是并行开发的，我们按照接口文档自行伪造（mock）一些数据。这样在理想状态下，在最终联调时，只需要切换一下配置文件的服务器IP端口即可。业界主流的包括Mock.js和json-server。前者是通过生成随机数据的形式伪造假数据，而后者功能更为强大，他提供了一台服务，并且方便快捷的提供了RESTful API。首先说一下到底什么才算RESTful API。其官方定义是Representational State Transfer 表现
2021-02-03 10:02:47
230
原创 JavaScript中的事件Event / CustomEvent / EventListener / EventTarget的相关概念。
在前端开发中，我们经常会给元素绑定事件。但恐怕对javascript本身事件机制没有太深的关注。在浏览器事件相关的API中，主要有三个接口：EventEventTargetEventListener以上的三个接口就足以完成一个事件的创建，监听，以及派发。// 创建事件const event = new Event('foo');// 事件监听const eventListener= function (e) {console.log(e.detail)};elem.addEvent
2021-02-01 19:52:55
287
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人