Vue
文章平均质量分 61
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
足各路
要逼自己优秀, 然后骄傲的活着。
展开
-
拥抱vite + vue3,制作一款属于自己的音乐播放器。
基于 VITE + VUE3 + TS + PINIA + TAILWINDCSS 开发的音乐播放器,界面模仿网易云音乐客户端。原创 2023-03-18 21:38:25 · 1507 阅读 · 1 评论 -
TinyMCE自定义表情包
记录一次接手别人代码的经历 - TinyMCE自定义表情包原创 2022-10-28 16:51:49 · 1956 阅读 · 0 评论 -
都2120年了,你还不知道VUE3 有哪些 UI框架?
Vue3已经发布一段时间了,版本趋于稳定并且可以用于生产。虽然很多开发人员对这个版本褒奖不一,新版本由于算是重新构建生态系统,相关资源的缺乏。与Vue2丰富的UI框架相比,Vue3就显得有点少,也算是影响开发人员使用Vue3的原因之一。在Vue中使用UI框架是一个很好的组合,因为它使开发人员更加专注抽象通用组件,从而提供了一个可维护的、高效的开发过程。本文推荐几个比较流行的VUE3 UI框架,同时提供出色的开发人员体验,合理利用,又或者学习借鉴都是不错的选择,排名不分先后。Ant Design Vue转载 2021-09-02 16:32:57 · 488 阅读 · 0 评论 -
vue3 安装vite并创建项目
Vite 特性使用 rollup按需编译,不会刷新全部DOM开发中热更新冷服务启动。不打包,使用 ES6 import。安装步骤1、安装 Vitenpm install -g create-vite-app2、利用 Vite 创建 Vue3.0 项目create-vite-app project-name3、安装依赖运行项目进入工程项目文件夹cd project-name安装项目依赖npm install运行项目npm run dev...原创 2021-07-07 15:06:57 · 1248 阅读 · 0 评论 -
Quasar 遇到的坑——在axios中使用router.push(‘/‘)路由跳转无效
记录近期使用Quasar的心得及遇到的坑。什么是Quasar?Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架,允许作为Web开发人员的您快速创建多种类型的responsive++网站/应用:SPAs (单页应用)SSR (服务器端渲染的应用) (+可选的PWA客户端接管)PWA(渐进式网页应用)通过Cordova或Capacitor构建移动APP(Android、iOS…)多平台桌面应用(使用Electron)Quasar的座右铭是:编写代码一次并.原创 2020-11-15 14:02:32 · 3621 阅读 · 0 评论 -
Property ‘$q‘ does not exist on type ‘CombinedVueInstance<{ ... }Record<never, any>& Vue ...Vetur
最近接触了一个vue UI框架 quasar,维护团队非常活跃,有望成为今后UI框架的潮流,推荐大家都可以去试试。根据官方文档创建了一个项目,使用VS Code打开项目(这里要夸一下Quasar团队,把VS Code配置项都列出来了,很贴心,配置VS Code)一、问题描述按照官方Eslint配置配置好后,打开项目,发现 vue<template>中$q出现红色下划线,虽然项目能正常运行,但这个提示一直在,强迫症必须要干掉它。如下图:二、解决办法经过查阅,发现是VS Code语.原创 2020-10-21 22:46:15 · 1157 阅读 · 2 评论 -
Vue 项目优化——首页内容自定制,开发阶段标题加上 dev - 前缀
开发环境的首页和发布环境的首页展示内容的形式有所不同如开发环境中使用的是import加载第三方包,而发布环境则是使用CDN,那么首页也需根据环境不同来进行不同的实现我们可以通过插件的方式来定制首页内容,打开vue.config.js,编写代码如下:module.exports = { chainWebpack:config=>{ // 开发阶段 config.when(process.env.NODE_ENV === 'production',con..原创 2020-07-01 09:21:28 · 370 阅读 · 0 评论 -
Vue PostCss插件——autoprefixer配置完成后无效,已解决
在配置autoprefixer时,按照之前的配置可以成功补全css浏览器前缀,但是结合postcss-pxtorem插件,px可以成功转换为rem,但css前缀无效。经过几个小时的鼓捣,终于让我发现了蛛丝马迹。哈哈哈,很开心,好激动!!一起来看一看博主陷入的困境吧。1. autoprefixer的配置根目录postcss.config.js文件中,配置代码如下:module.exports = { plugins: { 'autoprefixer': { overrid.原创 2020-06-25 16:13:47 · 10082 阅读 · 6 评论 -
Vue 项目优化——如何查看是否已开启Gzip压缩
Gzip压缩——减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间。一、打开控制台Chrome浏览器F12打开控制台,进入调试界面二、在表头单击鼠标右键如下图:勾选Content-Encoding后,在表头会多出Content-Encoding这一列,用于判断是否开启Gzip三、未开启Gzip如未开启Gzip,Content-Encoding是空值。如下图:四、已开启Gzip如已开启Gzip,Content-Encoding会显示gzip.原创 2020-06-25 13:26:40 · 2567 阅读 · 0 评论 -
Vue 项目优化——路由懒加载的配置
路由懒加载:当路由被访问时才加载对应的路由文件当打包构建项目时,JavaScript包会变得非常大,影响页面加载,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了。具体步骤:1 安装 @babel/plugin-syntax-dynamic-import打开Vue可视化面板,点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import点击安装。2.在babel...原创 2020-06-24 15:22:02 · 464 阅读 · 0 评论 -
Vue 项目优化——通过externals加载外部CDN资源,提高网页效率
默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件(js/chunk-vendors.******.js)中,从而导致打包后单文件体积过大的问题。一、如何解决上述问题我们可以通过webpack的externals节点,来配置并加载外部的CDN资源,凡是声明在externals中的第三方依赖包,最终都不会被打包。通过排除这些包减小js/chunk-vendors.******.js文件体积。原理:打包期间,webpack会先检查externals 中是否声明第三方依赖包.原创 2020-06-24 15:12:50 · 2001 阅读 · 0 评论 -
Vue 项目优化——为开发、发布模式指定不同的打包入口
默认情况下,vue项目的开发模式和发布模式,共用同一个打包的入口文件(即src/main.js),但是开发阶段和上线阶段代码往往会有细微的差别。一、为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件:发开模式的入口文件为:src/main-dev.js发布模式的入口文件为:src/main-prod.js默认情况下,vue-cli3.0生成的项目,隐藏了webpack配置项,如果我们要配置webpack,需要在项目根目录中创建vue.config.js文件来配置.原创 2020-06-21 13:46:09 · 799 阅读 · 0 评论 -
Vue 项目优化——生成打包报告
生成打包报告命令行形式生成打包报告vue-cli-service build --report通过vue-cli的命令选项可以生成打包报告--report选项可以生成report.html 以帮助分析报告内在vue控制台生成打包报告点击任务=>build=>运行运行完毕, 点击右侧分析,控制台面板查看报告通过控制台和分析面板,可以方便的看到项目中存在的问题...原创 2020-06-16 09:01:33 · 1563 阅读 · 0 评论 -
Vue 项目优化——使用nprogress添加进度条
NProgress安装依赖npm install --save nprogress在main.js中导入 js、css在main.js拦截器中配置, 展示/隐藏进度条关键代码// 导入进度条NProgess 的对应的js、cssimport NProgress from 'nprogress'import 'nprogress/nprogress.css'// 添加 request 请求拦截器 - 展示进度条 NProgress.start()axios.int.原创 2020-06-04 11:02:27 · 452 阅读 · 0 评论 -
Axios vue中Axios封装和API接口管理,单一、多个域名封装
二、 多域名接接口封装以下转载自掘金一位大佬,附链接:vue中Axios的封装和API接口的管理axios的封装根据需求的不同而不同。这里非常感谢评论里一些很中肯的建议,我也对此进行了思考和针对不同需求的改善。主要有以下改变:优化axios封装,去掉之前的get和post断网情况处理更加模块化的api管理接口域名有多个的情况api挂载到vue.prototype上省去引入的步骤h...原创 2020-04-29 16:43:56 · 1611 阅读 · 1 评论 -
Vue ElementUI——Form表单自定义校验规则遇到的坑
初次使用 ElementUI,发现很多需要注意的点,一不留神就会出现自己给自己埋下的坑。本次主要讲解 Form 表单中,自定义校验规则中的注意点。先来看一下埋坑代码以上代码是ElementUI中自定义校验手机号的使用,此时代码不会报错,但在提交表单时,用到validate方法对整个表单进行校验,会发现这个方法不会执行,百思不得姐啊。。接下来一起来填坑自己埋下的坑,自己总要解决的 ~...原创 2020-04-11 12:59:23 · 6380 阅读 · 0 评论 -
eslint 在vscode中的配置项 setting.json 修改
vue 项目中,eslint 校验会使 vue项目报错,通过配置 setting.json原创 2020-04-06 11:12:54 · 4295 阅读 · 1 评论 -
JS 常用插件——下拉刷新、上拉加载,左右滑动,移动端调试,图片预览、放大缩小、旋转
常用插件大全、非常好用、可以达到事半功倍的效果 ~下拉刷新、上拉加载 mescroll上下左右、滑动 better-scroll移动端调试 Vconsole图片预览、放大缩小、旋转 viewerjs对象转URL, 并以&拼接 qs本地存储 storeJS动画库 Velocity.js其他插件,博主会在发现并测试使用后,继续更新,请时刻关注 ~...原创 2020-03-10 10:59:21 · 1012 阅读 · 3 评论 -
Vue 安装Element-ui 报错 this dependency was not found:'element-ui/lib/theme-chalk/index.css'
安装Element-UI前一天刚安装好的Element-ui,第二天竟然打不开了! 项目代码没改,也没关闭编译器。是不是很神奇 !!报错内容:This dependency was not found:* element-ui/lib/theme-chalk/index.css in ./src/main.jsTo install it, you can run: npm instal...原创 2020-03-02 15:50:34 · 2099 阅读 · 0 评论 -
VUE 移动端适配——px2rem 和 postcss-pxtorem
这应该是vue项目在适配移动端时候,最简单的方法之一下面是基本步骤(使用cnpm)1.下载并引入lib-flexiblecnpm install --save lib-flexible在main.js中导入:import 'lib-flexible/flexible'2.引入px2rem-loadercnpm install --save px2rem-loader3.将px...原创 2019-05-22 16:03:33 · 3715 阅读 · 1 评论