07 2021 档案
摘要：什么是axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 主要的作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。 axios有8个特性 从浏览器中创建 XMLHttpRequests 从 `node.js 创建 ht
阅读全文
摘要：Vuex的核心概念 Vuex有5个核心概念，分别是State，Getters，mutations，Actions，Modules。 State Vuex使用单一状态树，也就是说，用一个对象包含了所有应用层级的状态，作为唯一数据源而存在。没一个Vuex应用的核心就是store，store可理解为保存应
阅读全文
摘要：前言 每一个 Vuex 应用的核心就是 store（仓库）。store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那
阅读全文
摘要：Vuex是做什么的？ 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new wi
阅读全文
摘要：1. Promise的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是
阅读全文
摘要：生命周期函数 生命周期函数代表的是Vue实例，或者是Vue组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段和运行期间以及销毁期间。 其中创建期间的函数有beforeCreate、created、beforeMount、mounted； 运行期间的函数有beforeUpdate、u
阅读全文
摘要：嵌套路由 有时候在路由中，主要的部分是相同的，但是下面可能是不同的。比如访问首页，里面有新闻类的/home/news，还有信息类的/home/message。这时候就需要使用到嵌套路由。项目结构如下： 我们创建了3个组件，分别是Home.vue，HomeNews.vue，HomeMessage.vu
阅读全文
摘要：什么是路由懒加载 官方的解释： 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 官方想表达的意思 首先，我们知道路由中通常会定义很多不同的页面 这个页面最后会被打包到哪
阅读全文
摘要：介绍 Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CS
阅读全文
摘要：vue-cli创建项目 上一篇我们安装了vue-cli，接下来我们就使用该脚手架进行创建项目 1.进入一个目录，创建项目 创建项目命令如下： vue create <Project Name> //文件名 不支持驼峰（含大写字母） 输入完命令后，会让你选择一个preset 我们可以看到，默认有3个选
阅读全文
摘要：前言 vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。 vue-cli介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实
阅读全文
摘要：前言 上篇我们已经配置好了本地开发服务器，但是配置的相对比较凌乱，一个文件中有些是开发时用到的配置，有些是生成时用到的配置，有些是开发和生成都要用到的配置，所以我们这里把环境分为3个环境 webpack.base.config.js：webpack基础配置，开发和生成环境都需要用到的配置 webpa
阅读全文
摘要：前言 当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器，这个本地
阅读全文
摘要：plugin 插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！ 插件目的在于解决 loader 无法实现的其他事。 常用的插件 由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 ne
阅读全文
摘要：前言 真实项目开发过程中，我们都是使用组件化的去开发vue的项目，但是组件化的思想又是如何来的呢？下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发，所以项目中只会有一个index.html文件，而且大多数时候这个html中的内容都是固定死的，之前我们都是把模板代码写在html
阅读全文
摘要：前言 如果我们想在webpack中使用vue，就需要在webpack中配置vue 配置vue 首先，我们需要在项目中安装vue，安装命令如下： npm install vue --save 安装完成后，我们在主入口main.js文件中导入vue并创建一个实例 import Vue from 'vue
阅读全文
摘要：图片处理url-loader(webpack5之前的处理方式) 在项目开发中，我们时长会需要使用到图片，比如在img文件夹中有图片test1.png，然后在normal.css中会引用到图片 body{ background: url("../img/test1.png"); } 但是此时，我们直接
阅读全文
摘要：css文件处理-准备工作 (以下项目配置都是基于上一篇webpack(4)的基础上) 在项目开发中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。 这里我们就在src目录中创建一个normal.css文件，代码如下： body{ background-color: aqua; }
阅读全文
摘要：前言 上一篇文章我们使用webpack打包成功了，但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址，非常麻烦，所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创建一个js文件webpack.config，当期我们配置最简单的导入导出，代码如下： const p
阅读全文
摘要：没有配置文件的打包 如果我们没有使用配置文件webpack.config.js，那么我们就需要通过命令来打包 案例 我们首先创建一个webpackTest文件夹，然后在文件夹中再创建2个子文件夹dist和src dist：打包后的文件夹 src：源代码文件夹 接着在src文件夹中创建4个文件，分别是
阅读全文
摘要：前言 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。接下来我们就会使用webpack
阅读全文
摘要：前言 如果我们需要使用webpack，就需要依赖node环境 nvm node npm webpack@cli webpack nvm安装 nvm是一个用来管理node版本的工具。我们之所以需要使用node，是因为我们需要使用node中的npm，使用npm的目的是为了能够方便的管理一些前端开发的包！
阅读全文
摘要：严格模式 ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。 严格模式的限制如下 变量必须声明后再使用 函数的参数不能有同名属性，否则报错 不能使用with语句 不能对只读属性赋值，否则报错 不能使用前缀 0 表示八进制数，否则报错 不能删除不可删除的属性，否则报
阅读全文
摘要：为什么使用slot slot(插槽) 在生活中很多地方都有插槽，电脑usb的插槽，插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘，手机，鼠标，键盘等等 组件中的插槽 组件的插槽也是为了让我们的组件更具有扩展性 让使用者决定组件内部的一些内容到底
阅读全文
摘要：父组件和子组件 我们经常分不清什么是父组件，什么是子组件。现在来简单总结下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。具体代码如下 <div id="app"> <component2></component2> </d
阅读全文
摘要：组件的组织 通常一个应用会以一棵嵌套的组件树的形式来组织： 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.
阅读全文
摘要：前言 有时候有一组html结构的代码，并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了，如果都是拷贝来拷贝去，很多代码都是重复的，包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件，以后在使用的时候就跟使用普通的html元素一样，拿过来用就可以了。 基本使
阅读全文
摘要：v-model v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件： 1.text和textarea元素使用value属性和input
阅读全文
浙公网安备 33010602011771号