- 博客(388)
- 收藏
- 关注
RSS订阅原创 React 简介
本教程我们来学习 React 的基础知识，React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 主要用于构建 UI， 拥有较高的性能，代码逻辑非常简单，现在又越来越多的人已开始关注和使用它。React的起源React 是 Facebook 开发的一款 JavaScript 库，而 React 被建造是因为 Facebook 认为市场上所有的 JavaScript MVC 框架都不能满足他们的扩展需求， 由于他们非常巨大的代码库和庞大的组织，使得 MVC 很
2021-10-14 23:21:05
416
2
原创 Vue CLI 建立目标
运行 vue-cli-service build 时，可以通过 --target 选项指定不同的生成目标，这允许我们使用相同的代码基为不同的用例生成不同的构建。我们主要从下面几个方面进行认识和了解：应用程序应用程序是默认生成目标，在此模式下：带资产和资源提示注入的 index.html供应商库被分割成一个单独的块以获得更好的缓存4kb以下的静态资产内联到JavaScript中`public 中的静态资产被复制到输出目录中Vue与JS/TS条目文件使用 .vue 文件作为
2021-10-10 22:48:48
696
原创 Vue CLI 模式和环境变量
模式是Vue CLI项目中的一个重要概念，默认情况下它有三种模式：development 被 vue-cli-service serve 使用test 由 vue-cli-service test:unit 使用production 由 vue-cli-service build 和 vue-cli-service test:e2e 使用通过传递–mode选项标志，可以覆盖用于命令的默认模式。例如，如果要在build命令中使用开发变量：vue-cli-service --mode
2021-10-05 20:30:15
606
原创 vue 和 vue-cli 的区别和关联
基本概念vue：是一套框架，用于构建用户界面的渐进式框架。Vue-cli： 而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。Vuevue主要是从基础知识、组件的了解、动画的过渡、可复用性和组合以及工具、模块化的管理。Vue-clivue-cli 主要是从搭建交互式脚手架、零配置原型开发、基于webpack构建并进行配置、插件和Preset的扩展以及图形化的创建和Vue.js项目的用户界面管理等。区别和关联区别：vue是一整套框架，而vue-cli只是它其中的一个脚手架
2021-09-30 23:46:59
2530
1
原创 Vue CLI 使用网页包
关于使用 webpack 的配置，我们可以从以下几个方面来进行了解与认识：简单配置调整webpack配置的最简单方法是为 configureWebpack 选项提供对象vue.config.js：module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] }}修改加载程序的选项添加一个新的加载器检测项目的webpack配置输出重定向到配置好的文件中便于检查：vue
2021-09-27 22:45:46
120
原创 Vue CLI 使用CSS
Vue CLI项目支持postss、CSS模块和预处理器，包括Sass、Less和 Stylus。我们可以从下面几个方面来了解与认识：引用资产所有编译的CSS都由 css-loader 处理，它解析了 url() 并将它们解析为模块请求，也就意味着我们可以使用基于本地文件结构的相对路径来引用资源。注意：如果要引用npm依赖项内的文件或通过webpack别名引用文件，则路径必须以 ~ 作为前缀，以避免歧义。预处理器创建项目时，可以选择预处理器（Sass/Less/Stylus）。如果没有这样操作的话
2021-09-23 21:26:54
814
原创 Vue CLI HTML和静态资产
HTMLHTML 可以从以下几个方面进行了解：索引文件文件 public/index.html 是一个模板，将使用 html webpack 插件进行处理，在构建期间，将自动注入资产链接，除此之外，Vue CLI 还可以自动注入资源提示（预加载/预取）、清单/图标链接（使用PWA插件时）以及生成期间生成的JavaScript和CSS 文件的资产链接。插值由于索引文件用作模板，因此可以使用lodash模板语法在其中插入值：<%=VALUE%> 用于非缩放插值；<%-VA
2021-09-17 23:16:16
404
原创 Vue CLI 浏览器兼容性
浏览器兼容性关于浏览器的兼容我们可以从下面一些内容来了解与认识：Vue CLI 3初始化的项目，你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。我们通常只需要修改browserslist就可兼容目标浏览器："browsersli
2021-09-15 22:57:21
809
原创 CLI 服务
使用二进制在Vue CLI项目中，@vue/cli-service 安装一个名为 vue-cli-service的二进制文件。我们可以直接以 npm 脚本中的 vue cli 服务或终端中的./node_modules/.bin/vue cli 服务的形式访问二进制文件。在使用默认预设的项目的package.json中：{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build"
2021-09-13 22:10:28
302
原创 Vue CLI 预设Presets
PresetsVue CLI预设是一个JSON对象，其中包含用于创建新项目的预定义选项和插件，因此用户不需要通过提示来选择它们。在此期间 vue create 保存的预设存储在用户主目录（~/.vuerc）中的配置文件中我们可以直接编辑此文件来调整/添加/删除已保存的预设。示例预设：{ "useConfigFiles": true, "cssPreprocessor": "sass", "plugins": { "@vue/cli-plugin-babel": {}, "
2021-09-10 22:14:08
761
原创 Vue CLI 插件 Plugins
插件PluginsVUE CLI 是使用是基于插件的体系结构的。如果检查新创建的项目的 package.json ，我们将发现以 @vue/cli-plugin- 开头的依赖项。插件可以修改内部webpack配置并将命令注入vue cli 服务，同时在项目创建的过程中列出的大多数特性都是作为插件实现的。基于插件的体系结构它使得VUE CLI 也更具有灵活性和可扩展性。在现有项目中安装插件每个CLI插件都附带有一个生成器（用于创建文件）和一个运行时插件（用于调整核心webpack配置并注入命令）。当
2021-09-08 22:50:11
2032
原创 Vue CLI 配置
简单配置在package.json 文件同项目下创建新的 js 文件（vue.config.js），然后在src文件下新建pages文件夹：文件夹下面的每一个都是单独的页面，然后有不同的 html，js，vue。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uGYWLtRX-1630853139332)(img/pz_2.png)]index.html：<!DOCTYPE html><html lang="en"><head&g
2021-09-05 22:46:08
353
2
原创 Vue CLI创建第一个项目
创建第一个项目安装完vue-cli3 之后，我们需要创建一个项目，它与之前的版本创建命令是不同的：// 这是vue-cli3的创建vue create project-vue-cli// 这是vue-cli2的创建vue init webpack project-vue-cli创建项目时会有一些选项，根据需求，我们要注意的是如果不是很熟悉，那么我们就不要开启语法检查，只要等待文件下载完毕就好了。创建项目对应选项：default (babel, eslint) 默认选项，包含babel和
2021-09-02 23:11:51
115
原创 Node 下载安装
下载Node下载地址：https://nodejs.org/zh-cn/download/，选择需要的版本下载。安装下载完成之后，进行安装，步骤如下：下载好直接点击运行链接下一步，左下角有一个安装协议（勾选）下一步，默认安装目录，当然我们也可以修改选择我们自己合适的路径下一步，如下所示，我们可以选择我们需要安装的模式，默认是第一个下一步[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-egMc0Bd9-16302496763
2021-08-29 23:09:18
119
原创 安装 vue-cli
安装安装node环境版本要求：vue-cli 需要8.9或者是更高的版本。官网下载：https://nodejs.org/zh-cn/download/下载之后根据提示进行步骤安装，然后下面是安装好之后的检查是否存在以及版本号// 查看版本信息node -v安装npm环境（一般会随着node安装后自带上）// 安装npm install npm -g// 查看版本信息npm -v安装 vue-cli 环境使用下面两者之一安装新的包npm install -g @vue/
2021-08-27 22:39:09
812
原创 vue-cli3 知识点
介绍vue-cli通过 @vue/cli 搭建交互式的项目脚手架通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发一个运行时依赖（@vue/cli-service）一个丰富的官方插件集合，集成了前端生态中最好的工具一套完整图形化的创建和管理 Vue.js 项目的用户界面CLICLI（@vue/cli）：一个全局安装的 npm 包（提供vue命令）vue create：快速创建一个新项目的脚手架vue serve：构建新想法的原型
2021-08-24 22:49:43
544
原创 jQuery noConflict() 方法
前面我们已经知道，jQuery 可以使用 $ 符号作为 jQuery 的简写，但是如果除了 jQuery 以外，其他的 JavaScript 框架也使用了 $ 符号作为简写，而我们又需要同时使用两种不同的框架，那么就可能导致脚本停止运行。而 jQuery 团队考虑到了这个问题，并实现了 noConflict() 方法。其他一些 JavaScript 框架包括：Sammy、Ember、MooTools、Backbone、Knockout、Batman、Cappuccino、JavaScript MVC、Go
2021-08-21 22:21:19
245
原创 jQuery AJAX
jQuery AJAX本节我们学习 AJAX，AJAX 是 Asynchronous Javascript And XML 的首字母缩写，译为异步 JavaScript 和 XML。是指一种创建交互式、快速动态网页应用的网页开发技术，可以在不需要重新加载整个网页的情况下，更新部分网页的技术。AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。jQuery 提供多个与 AJAX 有关的方法。通过 jQuery 提供的 AJAX 方法，我们可以使用 HTTP
2021-08-18 23:00:51
110
原创 jQuery 过滤
jQuery 的过滤方法可以允许我们根据特定元素在一组元素中的位置来选择该元素。关于 jQuery 过滤方法有以下几种，前三种是最基本的方法，后两种是其他方法，它们可以让我们选择与特定条件匹配或者是不匹配的元素：方法描述first()返回被选元素的首个元素last()返回被选元素的最后一个元素eq()返回被选元素中带有指定索引号的元素filter()规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回not()返回不匹配标准的所有元素
2021-08-15 23:34:24
227
原创 jQuery 遍历
本节我们学习 jQuery 的遍历。什么是遍历呢？遍历是指沿着某条搜索路线，依次对树中每个节点均做一次访问。访问结点所做的操作依赖于具体的应用问题， 具体的访问操作可能是检查节点的值、更新节点的值等。不同的遍历方式，其访问节点的顺序是不一样的。遍历是适用于多元素集合的情况，例如遍历数组、遍历集合等。jQuery 中的遍历其实就是根据其相对于其他元素的关系来查找 HTML 元素，以某项选择开始，并沿着这个选择移动，直到抵达所需要的元素为止，这一过程称为遍历。遍历DOMjQuery 提供了多种遍历 DO
2021-08-12 21:15:05
246
1
原创 jQuery 获取和设置元素的宽高
本节我们学习如何通过 jQuery 中提供的方法来获取或者设置元素的宽度和高度。jQuery 中用于获取设置宽高的方法有如下所示：方法描述width()设置或返回元素的宽度height()设置或返回元素的高度innerWidth()返回元素的宽度，包括内边距innerHeight()返回元素的高度，包括内边距outerWidth()返回元素的宽度，包括内边距和边框outerHeight()返回元素的高度，包括内边距和边框width()和
2021-08-10 21:16:42
4825
原创 jQuery CSS类
本节我们学习如何通过 jQuery 对 CSS 元素进行操作。jQuery 有以下四种操作 CSS 的方法：方法描述addClass()向指定元素中添加一个或多个 CSS 类removeClass()从指定元素中删除一个或多个 CSS 类toggleClass()对指定元素进行添加或删除 CSS 类的切换操作css()设置或返回样式属性addClass()方法addClass() 方法用于向指定元素添加一个或多个 CSS 类，我们在添加类时，可以选择
2021-08-08 22:22:43
210
原创 jQuery 添加和删除HTML元素
本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。jQuery 中用于添加 HTML 元素的方法有如下几种：方法描述append()在所选元素的末尾插入内容prepend()在选定元素的开头插入内容after()在选定元素后插入内容before()在选定元素之前插入内容而用于删除元素的方法有：方法描述remove()删除被选元素容，包括子元素empty()删除被选元素的所有子节点和内容app
2021-08-06 22:51:53
337
原创 jQuery 获取和设置HTML元素
jQuery 获取和设置HTML元素jQuery 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。text()方法text() 方法可以用于设置或获取所选元素的文本内容。示例：例如我们获取下列 <p> 标签中的文本内容：<!DOCTYPE html><html><head><meta charset="utf-8"><titl
2021-08-04 22:25:13
2488
原创 jQuery 回调函数和方法链接使用
在前面的章节中，我们也学习了一些 jQuery 的方法，大家有没有发现，这些方法大多都有一个共同点，就是有一个可选的 callback 参数，这个 callback 其实就是一个回调函数，回调函数作为参数传到另一个函数里面，一旦事件发生或者某一个任务完成时被执行，经常在异步代码中使用。回调函数的使用我们通过一个函数来举例，看一下当任务执行完成时，是如何执行回调函数的。示例：例如在执行 animate 函数时添加一个回调函数作为参数，在动画执行完毕后调用回调函数，弹出弹出层：<!DOCTYPE
2021-08-02 22:31:46
566
1
原创 jQuery 动画
我们可以通过 jQuery 中的 animate() 方法来创建自定义动画。animate()方法animate() 方法用于创建自定义动画。语法如下：$(selector).animate({params}, speed, easing, callback); params ：必需参数，定义要设置动画的 CSS 属性。speed：可选参数，指定效果的持续时间，可选值有 slow、fast、毫秒。easing：可选参数，规定在不同的动画点中设置动画速度的 easing 函数。内置的 eas
2021-07-31 22:26:15
312
1
原创 jQuery 滑动
本节我们学习 jQuery 中的滑动，我们可以通过 slideDown()、slideUp()、slideToggle() 方法来实现元素的滑动效果。slideDown()方法slideDown() 方法用于实现元素向下滑动效果。如果元素已隐藏，则显示被选元素。语法如下：$(selector).slideDown(speed,callback);参数 speed 用于规定效果的时长，可选值有 slow、fast、毫秒。参数 callback 是滑动完成后所执行的函数名称。示例：<!DO
2021-07-28 23:42:12
181
原创 jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏，本节我们来学习如何实现元素的淡入淡出效果。fadeIn()方法fadeIn() 方法用于淡入已隐藏的元素。语法如下所示：$(selector).fadeIn(speed,callback);speed：规定效果的时长，可选值有 slow、fast 或毫秒。callback：是 fading 完成后所执行的函数名称。示例：例如当我们点击按钮时，将紫色正方形设置为淡入效果：<!DOCTYPE html><html>&l
2021-07-25 22:25:01
1406
1
原创 jQuery 实现显示与隐藏效果
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效。hide()方法hide() 方法用于隐藏指定的元素，与 CSS 中的 display:none 效果类似。语法如下所示：$(selector).hide(speed,easing,callback)speed：可选，规定隐藏效果的速度。可选值为 slow、fast、毫秒。easing：可选，规定在动画的不同点上元素的速度，可选值为 swing、linear。callback：可选，hide() 方法执行完之后，要执行
2021-07-23 22:49:58
1272
3
原创 jQuery 事件
本节我们学习 jQuery 中的事件的使用，jQuery 是专门为响应 HTML 页面中的事件而设计的。我们在使用时，需要遵循以下原则：把所有 jQuery 代码置于事件处理函数中。把所有事件处理函数置于文档就绪事件处理器中。把 jQuery 代码置于单独的 .js 文件中。如果存在名称冲突，则重命名 jQuery 库。什么是事件首先我们要知道什么是事件，页面对不同访问者的响应叫做事件，例如点击某个按钮，选择单选框或复选框，滑动鼠标等，这些都可以称为事件。jQuery常用事件在 jQue
2021-07-20 22:28:51
214
2
原创 jQuery 选择器
本节我们来学习 jQuery 中的选择器，选择器是 jQuery 库中最重要的部分之一。jQuery选择器jQuery 选择器允许我们选取和操作 HTML 元素，它用于根据 HTML 元素的名称、ID、类、类型、属性和属性值等来查找 HTML 元素。除了基于现有的 CSS 选择器，它还有一些自己自定义的选择器。要注意 jQuery 中的所有选择器都以美元符号和圆括号开头，例如 $()。元素选择器jQuery 元素选择器是根据元素名称匹配相对应的元素。也就是说它是根据元素的标签名来选择的，指向的是
2021-07-18 22:00:43
195
2
原创 jQuery语法
本节我们学习 jQuery 的语法，通过 jQuery，我们可以选取 HTML 元素并对它们执行操作。jQuery语法jQuery 语法是为选取 HTML 元素和对元素执行某些操作而定制的。基本语法格式：$(selector).action()首先是美元符号 $，是 jQuery 的别名，表示 jQuery 对象。selector 是一个选择符，用于查询 HTML 元素。action() 表示要对元素执行的 jQuery 操作。示例：例如我们来看几个例子：$(this).hide(
2021-07-16 22:40:05
145
原创 jQuery 安装
本节我们学习 jQuery 的安装，我们在实际项目中，如果要使用 jQuery，则需要先下载 jQuery 库，然后把它引入到要使用的网页中。jQuery 有下面几种使用方法：从官网下载 jQuery 库，然后引入到页面中。使用命令安装 jQuery，例如 npm、bower 命令。从 CDN 中载入 jQuery， 比如从 Google 中加载 jQuery。jQuery下载我们 可以在 jQuery 的官网下载 jQuery，下载地址为：https://jquery.com/downl
2021-07-13 23:20:33
1558
1
原创 jQuery 简介
本教程我们来学习 JQuery 的基础入门知识。JQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库。jQuery 极大的简化了 JavaScript 编程，例如以前要一大段 JavaScript 代码才能实现的功能，使用 jQuery 很轻松就能完成。JQuery 发展历程历程发展2005年8月Prototype的 “Behaviour” 库的改进2006年1月John Resig 等人于
2021-07-11 20:32:30
167
原创 Yarn工作区
本节我们学习 Yarn 工作区，什么是工作区呢？ 工作区是设置软件包体系结构的一种新方式，默认情况下从 Yarn 1.0 开始使用。我们可以使用这种方式安装多个软件包， 也就是只需要执行一次 yarn install 命令便可以将所有依赖包全部安装。如何使用工作区在 package.json 文件中添加以下内容，接下来我们将此目录称为 “工作区根目录”：{ "private": true, "workspaces": ["workspace-a", "workspace-b]}其
2021-07-06 15:39:51
160
原创 Yarn依赖与版本
本节我们来讲 Yarn 中的依赖与版本。软件包依赖关系对于包的成功是至关重要的，当开发软件包时，我们可能会用到其他包里的现有代码来开发自己的软件包功能，那么其他包就可以称为项目的依赖项。所有的项目依赖都在 package.json 文件中声明，每个依赖项都需要指名依赖名称和最低版本信息。而 yarn.lock 文件里保存了每个依赖的安装版本，来确保软件包在所有安装过程中保持一致。依赖的类型不同的依赖有着不同的目的，在构建项目时需要一些依赖项，在运行程序时也需要一些依赖项，因为有不同的依赖类型。关于
2021-07-04 21:48:24
1170
原创 发布Yarn包
本节我们来学习如何发布 Yarn 包，如果我们希望通过 Yarn 共享我们创建好的包给全世界各地的其他开发者，可以将软件包托管到一个可信任的网站上。创建软件包首先我们需要创建一个软件包，可以通过下列几个命令来创建，如下所示：> git init my_yarn> cd my_yarn> yarn init看一下这几个命令的执行效果：其中 git init my_yarn 命令将会初始化创建一个新本地仓库，它在工作目录下生成一个名为 .git 的隐藏文件夹。然后使用 cd
2021-07-01 22:55:51
938
原创 yarn.lock文件
为了在多台机器之间获得一致的安装结果，Yarn 可能会需要比 package.json 文件中配置的依赖项更多的信息。它需要准确存储每一个依赖项的安装版本。因此在 Yarn 项目的根目录我们需要一个 yarn.lock 文件，这个 yarn.lock 文件是自动生成的。当我们执行 yarn 命令或者添加依赖包命令后，Yarn 都会在项目根目录下自动生成一个 yarn.lock 文件。在使用 Yarn 安装、升级、删除依赖项目时，会自动更新到 yarn.lock 文件中。一般我们不会去手动编辑这个文件，因为
2021-06-29 16:28:32
2527
原创 配置package.json文件
前面我们讲到，当使用 yarn init 初始化一个项目时，会自动生成一个 package.json 文件，在这个文件中可以配置项目的信息，例如名称、版本号、描述信息等，还可以定义项目所需要的各种依赖包。package.json文件中的字段下面是一些 package.json 文件中的字段介绍，其中 name 和 version 是 package.json 中最重要的两个必需字段，如果没有它们那么包将无法被安装，两者一起用来创建一个唯一的id。name：包的名字，在 URL 中作为命令行参数，作为
2021-06-27 22:37:44
363
1
原创 Yarn的使用
上一节我们已经安装好了 Yarn，本节我们来学习 Yarn 的使用。我们可以通过 yarn 来安装、升级、删除依赖包。初始化新项目我们可以使用 yarn init 命令来初始化一个新项目，如下图所示：此时项目中会生成一个 package.json 文件，类似于如下所示：{ "name": "xkd_yarn", "version": "1.0.0", "main": "index.js", "license": "MIT"}安装依赖包我们可以通过 yarn 来安装依赖包，下
2021-06-25 11:14:57
798
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人