Vue
文章平均质量分 83
巴山却话
资深前端讲师、同时掌握php、python等后端技术、打通前后端开发的任督二脉
展开
-
vue路由模式及 history 模式下服务端配置
前言vue 项目中,我们比较常用的模式为 hash 和 history 模式 默认情况下,vue 项目采用的就是 hash 模式 有些人对 history 模式下,为什么需要服务器做相应配置,以及如何配置不甚理解,所以这篇文章就对此做出分析,重点是让大家理解,为什么 history 模式下需要服务器做配置 这里会对 hash 模式和 history 模式都做出说明,通过对比,才能更好的理解我们的行为1. hash 模式1.1 什么是 hash 模式先从一个熟悉的锚标记案例开始,帮助大家理解 hash原创 2022-04-28 17:15:08 · 10495 阅读 · 5 评论 -
一个域名部署多个vue项目的方法
前言在生产环境中,一般一个域名对应一个前端项目,但如果域名紧张,不想浪费二级域名,或者自己的测试项目,完全可以一个域名对应多个前端项目、以 vue 为例,要实现这一点,需要 vue-router 中的 base 选项助力2. base 简介base 选项设置应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"base 选项的默认值为 “/”,这个代表什么意思呢?我们知道,无论是开发模式下,还是生产模式下,我们都需要启动一个服务来运行我们的前端项目原创 2022-04-28 09:02:59 · 3770 阅读 · 2 评论 -
vue3 组合式API使用第2篇-保证学得会
继续接上1篇从组合式 API 中使用计算属性开始1. 计算属性使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性如将上面案例,加入过滤功能,作用是在文本框中输入小说名称,然后从当前的结果中过滤出内容并显示<template> <input type="text" v-model="searchQuery" /> <ul> <li v-for="(item, index) in bookMathingSearch原创 2022-04-27 17:28:50 · 429 阅读 · 0 评论 -
vue3 组合式API使用第1篇-保证学得会
本文已参与「新人创作礼」活动,一起开启掘金创作之路1. 了解组合式API1.1 选项式API特点讲解 vue3 的组合式 API 之前,先来看看传统的选项式 API 的特点一个非常明显的优点就是学习成本较低,因为框架已经规定死了数据在 data 中自定义方法及事件处理函数在 methods 中计算属性在 computed 中侦听器在 watch 中钩子函数中可能还分布了一些初始化代码。。。。。。。。。。。但是当组件中功能越来越多,逻辑越来越复杂时,选项式 API 的确定就爆露出来了原创 2022-04-27 17:26:54 · 1380 阅读 · 1 评论 -
vue 路由懒加载
本文已参与「新人创作礼」活动,一起开启掘金创作之路1. 路由懒加载如何实现当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效当前,我们使用如下方式导入组件import Login from '../views/Login打包后,这些组件都会被打包到一个.s文件中,css 代码会打包到 css 文件中访问应用时,就会下载这js文件和对应的css文件随着代码的增多,文件原创 2022-04-27 11:05:21 · 8141 阅读 · 0 评论 -
详解vue 配置 cdn 加载依赖的方法
前言生产环境中,将项目依赖的一些第三方包替换成通过 cdn 方式外部加载,而不是打包到 vender,对于提升应用的加载、响应速度很有意义,下面我们一步步的实现这点CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率1. 查看打包后的资源情况首先使用 build 命令打包,看看在使原创 2022-04-24 10:35:13 · 7446 阅读 · 3 评论 -
删除 console 语句引发的惨案
前言:虽然 babel-plugin-transform-remove-console 已经几年不更新了,但打包时去除 console 语句还是比较省时省力,所以项目中也就用了,没想到反而费劲了本来问题很简单,但有时候不细心,可能就会浪费大量的时间解决问题,所以写篇博客,方便他人急急如律令,喷子请绕行1、安装和使用安装npm i babel-plugin-transform-remove-console配置(babel.config.js)// 存储项目发布阶段需要用到的插件const p原创 2022-04-22 10:25:27 · 913 阅读 · 0 评论 -
关于 axios 取消重复请求的分析
前言关于取消重复请求,最重要的是这么做的意义,而不在于代码的实现其实,我觉得,绝大部分能够想到的应用场景,都可以通过防抖、节流方式实现,比如实时搜索,比如重复订单提交、比如上拉获取最新数据等我们知道,所谓取消请求,是在请求已经发出执行的,只不过取消的及时的话,整个请求过程还没有全部完成,可能只是将请求送达服务端,但还没有接收到服务端的返回结果就取消了,这样也仅仅是不对服务端的结果做处理而已当然,这么做的好处很明显,比如上拉加载数据,在整个上拉过程中,可能会频繁的发出请求,每次请求返回之后,都要将数据原创 2022-04-09 08:18:27 · 4235 阅读 · 1 评论 -
vue i18n 国际化保姆级教程_看不懂自己找原因
1、国际化介绍对于一些跨国项目来说,国际化是尤为重要的,那么什么要国际化呢?国际化的意思就是将我们写的项目,能够根据不同国家的语言,进行翻译,进行切换,方便不同国家的客户使用基本思路如下① 定义语言包:需要几种语言展示,就定义几个语言包② 创建对象,对语言包进行整合,对象的 key 为语言包的引用,值为语言包对象③ 创建 vue-i18n 类的对象,同时为其 messages 属性为第②步创建的对象,为其 locale 属性赋值为第②步中语言对象对应的 key④ 在创建 Vue 实例原创 2022-04-04 20:46:47 · 7419 阅读 · 4 评论 -
Vue组件开发第一篇:一个分页组件从开发到发布全过程
1.前言这篇只作为一个组件开发入门,虽然较为简单,但却能够学习一个组件从开发到发布的整个流程,后续会陆续更新2.流程介绍一个组件从开发到上线大概的步骤如下(我们这里只考虑一个组件,而不是组件库)单文件组件开发:像普通的单文件组件一样开发,测试功能 新建项目,将上面开发的组件引入,并编写打包的入口文件 建议先进行本地打包,本地测试,测试没有问题后,再进行下一步 编写 READ.me 文件 编写忽略清单 注册 npm 账号 命令行中登录账号 发布下面开始具体介绍每个步骤3.编原创 2022-03-30 19:59:49 · 1376 阅读 · 0 评论 -
循序渐进使用vuex
1. Vuex 简单了解Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化换种说法可能更好理解如果有一些公共的数据需要在多个组件中共享或者某一个状态的改变会影响多个组件,那么这时候用vuex是非常合适的,比如我们经常会看到的中后台都有多风格的切换,这种全局的改变就可以用到vuex去完成!使用Vuex管理数据的好处: 能够在 vuex 中集中管理共享的数据,便于开发和后期进行维护原创 2021-03-26 16:58:30 · 237 阅读 · 0 评论 -
深入浅出 proxy 系列之一:Proxy 是什么
1. 理解proxy1.1 类还是函数proxy 是 ES6 中新增的一个函数,也可以叫类,但是 js 中一切皆是函数,即使使用 class 定义的类,最终也是函数,所以我们还是称其为函数吧,虽然我更喜欢称其为类,因为这更符合我后端背景1.2 为什么没有原型对象console.log(Proxy.prototype); // undefined我只是好奇试了一下,果然发现了特殊之处:作为一个构造函数,为什么没有原型对象?这是 ECMA 的官方说明由于 Proxy 构造出来的原创 2021-03-19 14:50:23 · 8345 阅读 · 3 评论 -
自己动手 webpack 打包 vue 单文件组件
1. 为什么要了解这些vue 的脚手架集成了 webpack,并进行了大量的默认配置我们只需要按照框架的要求编写代码,打包就好了慢慢的我们就成了傻瓜,不知道这其中到底发生了什么,一旦遇到问题,不知道该如何思考,因为你可能都不清楚它的运作原理更何况,看尤大的思路,将来很可能使用脚手架创建项目时,打包工具不再是默认的,而是让你 webpack 和 vite 二选一所以,我们就更需要对打包过程有一个大概的了解下面我们就手动实现这一点2. 动手实践SPA 和组件化密不可分,组件化让S原创 2021-03-10 16:51:18 · 3690 阅读 · 4 评论 -
html-webpack-plugin 自动引入 bundle.js
webpack 使用 html-webpack-plugin 简化 html 的创建,此插件会为我们按照指定路径和名称生成一个 html 文件,作为网站的入口文件但是在新版本中,其会自动在 html 文件中添加 bundle.js(出口文件)的引用如下main这样,我们已经手动在 body 中引入了 bundle.js但是打包之后,发现,header 中也被引入了一个 bundle.js有的同学手动引入的时 dist 目录下的 bundle.js,而插件自动引入的时跟目录下的 bun原创 2021-03-09 15:23:44 · 991 阅读 · 1 评论 -
docsify 生成文档
1、为什么使用docsify我喜欢使用 markdown 编写一些课件还喜欢将课件放到码云上(因为 github 不稳定)但是很显然,这远没有 html 结构浏览器来舒服docsify 小工具完美解决了问题小工具的原理很简单,创建一个 docs 目录,目录中有 index.html、readme.md和一个..nojekyll文件docs目录:建议将所有的 markdown 文件都放在这个目录或其子目录中 readme.md 就是一个说明文件,可以删除 .nokekyi 一个空文原创 2020-11-24 22:49:42 · 1032 阅读 · 0 评论 -
阿里云短信服务开通和配置
1.开通短信服务入口https://dysms.console.aliyun.com/dysms.htm?spm=a2c4g.11186623.2.26.2e202e79lpW6kK&accounttraceid=7d619ee3-a9ad-4890-af2e-e3ef2533b73f#/overview如果没有注册过阿里云账户,需要注册,并进行实名认证如果已经开通,则显示短信发送记录,如果没有开通,则会出现开通按钮2.创建并查看AccessKeyAccessKey 用来验证原创 2020-05-08 20:48:13 · 2514 阅读 · 0 评论 -
vue项目之服务器文件压缩
参照上一篇博客最后的图,虽然采用了路由懒加载,但是首页加载的速度仍然比较慢,因为我们的 chunk-vendors.js 文件还是比较大下面我们就可以在服务器端想点办法,客户端请求某个文件时,服务区端采用一定的压缩算法,对文件体积进行压缩后,再发送给客户端对于 node.js 来说,可以使用 compression 中间件1、部署项目当前,项目已经开发完毕,正式上线后,我们使用 P...原创 2020-04-24 22:35:52 · 592 阅读 · 0 评论 -
vue-quill-editor 使用-图片上传
vue 项目开发中,文本编辑器的选择很多,一些熟悉的文本编辑器都可以使用,如UEditor、wangEditor,这里介绍基于 vue 的一个文本编辑器插件 vue-quill-editor此插件基于 quill,所以使用 cdn 节点方式引用时,还需要引用 quill.js使用 npm 安装时,只需要安装 vue-quill-editor即可,因为会自动下载依赖npm inst...原创 2020-04-24 11:50:12 · 4401 阅读 · 1 评论 -
vue项目打包之路由懒加载
虽然前面经过了去除console语句、使用CDN节点的处理,但是部署时打的包还是过大这绝对无法忍受的同时,vue 也给出了建议,那就是将打包文件拆分成更小的资源什么意思呢?以当前项目为例,首先展示的登录也,事实上,此时没有必要加载其他的组件,如商品、类别、角色用户等组件的代码但是,因为代码被打包到一个文件中,导致下载这个文件太慢所以我们的思路时,打包时根据路由将对应的组...原创 2020-04-23 18:50:58 · 838 阅读 · 0 评论 -
vue打包之首页内容生成
上一章说到了,可以通过外部 CDN 的方式加载依赖,这会产生两个结果入口文件中的一些导入会被删除 index.html 中会引入响应的删除的依赖但是,我们希望的是,部署的时候 index.html 中使用这些 CDN 节点的依赖但是,在开发阶段,不希望 index.html 中的这些引用存在这就需要在 index.html 中根据当前的打包环境是开发还是部署,动态的决定 inde...原创 2020-04-22 23:29:20 · 468 阅读 · 0 评论 -
vue项目打包之减小包的体积
默认情况下,凡是通过 import 方式引入的包,打包时都会被打包,这就会导致最后的包体积比较大,伴随而来的就是程序的加载速度慢解决方法主要是两个一个是使用CDN一个是路由的懒加载先说 CDN核心思想就是将线上环境中用到一些依赖,比如 vue、vueRouter 、axios 等,使用 cdn 节点的方式引用,而不是打到包里去,当然我们开发时依赖的一些包,最好还是使用本地包,而...原创 2020-04-22 22:13:33 · 1750 阅读 · 0 评论 -
vue项目打包之开发环境和部署环境
项目开发阶段和生产环境可能不一样如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口手动改动接口,既繁琐又容易出错(当然,区别还不止这些)优雅的解决方案是,分别使用两个入口文件,一个用于开发环境打包,一个用于生产环境打包具体来说,分为下面几个步...原创 2020-04-22 20:59:05 · 4292 阅读 · 0 评论 -
vue打包上线移除 console
开发阶段,我们会编写大量的 console 语句用于测试使用 build 命令打包时,会作为警告提出,因为上线之后,这些 console 语句是没有任何作用的,所以警告你应该移除挨个文件手动删除的方法,会有两个问题耗时耗力代码中其实还是需要console的,只是打包后,希望生成的文件中不包含而已解决的办法比较多1. babel-plugin-transform-re...原创 2020-04-21 22:51:01 · 3564 阅读 · 1 评论 -
async 和 await 之失败了怎么办
下面看一下 element 中的弹出框案例<template> <div> <el-button type="text" @click="open">点击打开 Message Box</el-button> </div></template><script>export default ...原创 2019-11-29 18:39:00 · 3572 阅读 · 1 评论 -
再谈async 和 await
这两个关键字不是为JS 增加了什么新功能,而是改变代码的编写方式,确切来说就是让我们能够以编写同步代码的方式编写异步代码举例,服务器上有 data1.json 和 data2.json 两个文件现在要先请求 data1.json 然后再请求 data2.json这就意味着要发送两次异步请求,而且是有先后顺序的我们看下传统方式会如何编写代码<script src="../...原创 2019-11-29 08:54:05 · 167 阅读 · 0 评论 -
async 和 await
async 和 await 配合 promise 可以彻底解决异步回调地狱问题先看看上一篇使用 promise 后的代码function readFile(fileName) { return new Promise((resovled, reject) => { fs.readFile(fileName, 'utf8', (err, data) =>...原创 2019-11-23 10:22:18 · 199 阅读 · 1 评论 -
Promis
Promise 能够解决异步回调过多,导致解构混乱,解构难以理解的问题1. 使用异步回调读取文件有4个文本文件,名称分别为1.txt,2.txt,3.txt,4.txt,内容分别为“床前明月光”,"疑是地上霜","举头望明月","我是郭德纲"要求按照顺序读取4个文件内容并输出const fs=require('fs')// 读取 1.txtfs.readFile('1.txt...原创 2019-11-23 09:59:20 · 339 阅读 · 0 评论 -
axios 拦截器和默认值
1. 在Vue原型中加入 axios在vue页面中,要想使用 axios ,需要在每个页面都引入 axiosimport axios from 'axios'如果想简化这个代码,可以在 main.js 红这个引入 axios ,并将其写入 Vue 的原型import axios from 'axios'// 将axios绑定到原型Vue.prototype.$http = ......原创 2019-11-22 19:32:51 · 761 阅读 · 2 评论 -
vue-cli-service 不是内部或者外部命令
在学校更新了不少功能,也安装了不少插件,到家里 pull 项目之后,运行npm run serve就出现了上面的错误这是由于一些包没有安装导致的,所以应该先执行如下命令npm install然后再执行上面的命令启动项目即可...原创 2019-11-05 20:49:37 · 1469 阅读 · 0 评论 -
vs code 启用 eslint
使用 vue-cli 脚手架创建项目时,可以选择安装 ESLint,但是只会在运行项目时才会检查,然后给出这样的提示如果希望编写代码时就给出提示,需要安装 ESLint 插件,然后编写代码时就会有下面这样的提示了...原创 2019-08-15 10:18:36 · 621 阅读 · 0 评论 -
vs code 关闭并重新打开 vue 文件中文乱码问题解决
在 vs code 中,新建 .vue 文件,模板中输入中文,关闭再打开,出现乱码。原因时保存时以 utf-8格式,而打开时以 windows 1252 编码。解决方案:1)设置使用utf-8格式打开和保存文件2)禁止工具自动猜测文件编码文件-》首选项-》设置,然后搜索“encode”...原创 2019-08-15 09:11:11 · 2688 阅读 · 0 评论