悦涵仙子-CSDN博客

原创 Vue3 中的几个坑，你都见过吗？

异步组件以前是通过将它们包含在方法中来声明的。Vue3 中需要使用 defineAsyncComponent 来声明异步组件。每个框架都有学习曲线，Vue3 相对 Vue2 更加陡峭，在框架切换之间也会有一定的学习成本。但 Vue3 组合式 API 相对 Vue2 选项式 API 确实更加简洁易用。如果您在使用过程中有什么疑问，也欢迎留言交流。

2023-09-11 15:33:51 239

转载 relation-graph一个vue关系图谱组件的使用

"></div>

2023-09-11 14:32:19 750

想想我们在白天工作的时候，其实有很多时间都是被无效浪费的，如果我们给自己强制设定下班时间，创新、改变工作方式，高效率、高质量、高密度的完成工作，那是否就可以减少加班，让我们有更多的自由时间去学习新的知识技术，进而又提高我们的工作效率，形成一个正向循环。因为早晨是大脑的黄金时间，经过一晚上的睡眠，大脑经过整理、记录、休息，此时的状态是最饱满的，适合专注度高的工作，比如编程、学习外语等，如果把时间浪费在开会、刷手机等低专注度的事情上，那么就会白白浪费早上的价值。

2023-09-05 10:20:21 109

原创使用vue3创建项目

vue3项目创建

2023-02-02 11:33:26 149 1

转载 npm 设置和取消代理的方法

设置代理 npm config set proxy=http://127.0.0.1:8087 npm config set registry=http://registry.npmjs.org关于http经过上面设置使用了http开头的源，因此不需要设http_proxy了，否则还要加一句 npm config set https-proxy http://server:port代理用户名和密码 npm config set proxy http://username:password@

2022-05-21 16:34:31 981

原创解构的应用

解构的作用：可以让以下这三行代码变成一行：let arr = ['Ilya', 'Kantor']let firstName = arr[0]let surname = arr[1]变成：let [firstName, surname] = ['Ilya', 'Kantor']Array Destructuring1.可以跳过赋值元素// second element is not neededlet [firstName, , title] = ["Julius", "Caesar

2020-09-13 18:29:25 283 1

转载简单的 VSCode 插件离线安装方法

一、引言最近想要使用 VSCode 来进行项目的开发工作，无奈工作机上无法上网。这就涉及到了相关插件的离线安装的问题。在参考了 VSCode 插件离线安装这篇博客的方法之后，我成功离线安装了插件。可是令我惊奇的事情是：可能是 VSCode 社区了解到了我们离线安装插件的需求，现在在插件的页面上，已经有了下载链接了，也就是不用我们再去手动组下载链接了。那么我们离线安装 VSCode 插件的步骤将会大大减少。二、离线安装 VSCode 插件接下来，我来总结下 VSCode 插件离线安装的步骤：

2020-09-06 15:25:50 542

原创 slice,splice,split区别和作用

slice(start,[end])slice(start,[end])方法：该方法是对数组进行部分截取，该方法返回一个新数组，参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）。包含了源函数从start到 end 所指定的元素，但是不包括end元素，比如a.slice(0,3)；如果出现负数就把负数与长度相加后再划分。slice中的负数的绝对值若大于数组长度就会显示所有数组若参数只有一个，并且参数大于length，则为空。如果结束位置小于起始位置，则返

2020-08-30 14:29:25 596

原创 js使用protobuf——支持web端交互使用

ProtoBuf简介Protocol Buffer的简称。Google旗下的一款平台无关，语言无关，可扩展的序列化结构数据格式，适合用于数据存储，作为不同应用、语言之间相互通信的数据交换格式,序列化后的数据为二进制数据（pb格式的数据），类比XML、JSON。protobuf最先支持C++ C# Go JAVA Python PHP语言，最近发布的代码包又支持了JavaScript，今天就来谈下，js怎么使用protobuf。官网地址:https://developers.google.com/pro

2020-08-28 20:59:37 3684

原创 Vue CLI配置指南（6）构建目标 vue-cli-service build & 部署

当你运行 vue-cli-service build 时，你可以通过 --target 选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。1.应用2.库Vue vs. JS/TS 入口文件3.Web Components 组件1.应用2.库Vue vs. JS/TS 入口文件3.Web Components 组件...

2020-08-26 18:35:59 3619

原创 Vue CLI配置指南（5）环境变量和模式

你可以替换你的项目根目录中的下列文件来指定环境变量：.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略一个环境文件只包含环境变量的“键=值”对：FOO=barVUE_APP_SECRET=secret被载入的变量将会对 vue-cli-s

2020-08-26 18:28:32 699

原创 Vue CLI配置指南（4）webpack 相关

修改webpack有两种方式1.简单的配置方式警告2.链式操作 (高级)修改 Loader 选项添加一个新的 Loader替换一个规则里的 Loader修改插件选项3.审查项目的 webpack 配置4.以一个文件的方式使用解析好的配置1.简单的配置方式调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：// vue.config.jsmodule.exports = { configureWebpack: {

2020-08-26 18:10:13 889

原创 Vue CLI配置指南（3）CSS 相关

引用静态资源所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。预处理器你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成

2020-08-26 17:48:08 896

原创 Vue CLI配置指南（2）HTML 和静态资源

HTMLIndex 文件public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。Preload<link rel=“preload”> 是一种 resource hint，用

2020-08-26 17:35:36 697

原创 Vue CLI配置指南（1）

一、何为CLICLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。二、何为CLI 服务CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev

2020-08-25 22:23:13 1021

原创 Webpack（7）HMR模块热替换

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。HMR 不适用于生产环境，这意味着它应当只在开发环境使用。启用 HMR启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。const path = require('path'); const HtmlWebpackPlugin = requ

2020-08-23 22:39:13 144 1

原创 Webpack（6）Plugins插件

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一

2020-08-23 22:16:30 138 1

原创 Webpack（5）loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。示例例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转

2020-08-23 21:54:04 600 1

原创 Webpack（4）Mode模式

告知 webpack 使用相应模式的内置优化，值有两个：development 或 production 之中的一个在配置中提供 mode 选项：module.exports = { mode: 'production'};或者从 CLI 参数中传递：webpack --mode=production支持以下字符串值：选项描述developmentright-aligned 会将 process.env.NODE_ENV 的值设为 development。启用 N

2020-08-23 21:31:23 383 1

原创 Webpack（3）Output输出

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。注意，即使可以存在多个入口起点，但只指定一个输出配置。在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：filename 用于输出文件的文件名。目标输出目录 path 的绝对路径。单入口

2020-08-23 21:20:12 408 1

原创 Webpack（2）Entry入口

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src对象语法const config = { entry: { app: './src/app.js', vendor

2020-08-23 21:02:31 465 1

原创 Webpack 打包（1）总览

五个核心概念：入口(entry)输出(output)loader插件(plugins)模式(mode)一个完整的webpack.config.js 示例：const path = require('path');module.exports = { mode: "production", // "production" | "development" | "none" mode: "production", // enable many optimizations for pr

2020-08-20 14:47:46 164 1

原创 Vue可复用性（4）插件 Plugin

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：添加全局方法或者 property。如：vue-custom-element添加全局资源：指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router使用插件通过全局方法 Vue.use() 使用插件。它

2020-08-19 19:05:45 263 1

原创 Vue可复用性（3）过滤器Filter

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：{{ message | capitalize }}<div v-bind:id="rawId | formatId"></div>局部过滤器你可以在一个组件的选项中定义

2020-08-19 18:58:53 373 1

原创 Vue可复用性（2）自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中

2020-08-19 18:47:27 198 1

原创 Vue可复用性（1）mixins

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。例子：// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// 定义一个使用混入对象的组件var Comp.

2020-08-19 17:20:41 168 1

转载 vue组件通信方式之父子、隔代、兄弟组件通信($emit/$on)

Bus，通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。注意：记得销毁自定义事件，否则容易造成内存泄露。基本使用具体实现方式：var Bus = new Vue();Bus.$emit("add-todo", { text: this.newTodoText });Bus.$on("add-todo", this.addTodo);Bus.$off("add-todo", this.addTodo);

2020-08-17 19:07:17 668 1

原创 Vue程序化的事件侦听器

你已经知道了 $emit 的用法，它可以被 v-on 侦听，但是 Vue 实例同时在其事件接口中提供了其它的方法。你通常不会用到这些，但是当你需要在一个组件实例上手动侦听事件时，它们是派得上用场的。通过 $ on(eventName, eventHandler) ：监听当前实例上的自定义事件。事件可以由 vm.$ emit 触发。回调函数会接收所有传入事件触发函数的额外参数。通过 $once(eventName,eventHandler) ：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会

2020-08-17 18:41:38 532 1

Struts in Action 中文版

正则表达式30分钟入门教程

程序员每天该做的事

空空如也