vue
文章平均质量分 90
gqkmiss
前端
展开
-
VitePress 构建的博客如何部署到 github 平台?
由于我们的项目名称为 ,所以我们把 设置为 ,需注意前后 2.2. 页面显示异常这个时候你发现本地页面显示异常是因为配置了 之后,导致路径不正确,点击上面的链接即可配置好 之后,你发现其他页面都没问题,图片也都能正常显示,但是 不能正常显示。只需要把 中配置的 路径改下即可,加上 前缀项目正常构建成功是构建之后 文件夹中的内容,不包括 文件夹等几分钟,一般一分钟以内不停的刷新当前页面也行然后就会发现当前页面多了个 模块点击之后,就跳转到对应的网站链接啦…我这边是原创 2024-04-28 10:37:28 · 973 阅读 · 0 评论 -
使用 Vitepress 构建博客并部署到 github 平台
VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的站点而设计。简而言之,VitePress 获取用 Markdown 编写的内容,对其应用主题,并生成可以轻松部署到任何地方的静态 HTML 页面。原创 2024-04-28 10:18:43 · 2894 阅读 · 5 评论 -
开发 Chrome 浏览器插件时进行 Vue3+Vite 多页面多入口配置
开发 Chrome 浏览器插件时进行 Vue3+Vite 多页面多入口配置原创 2024-01-25 16:47:18 · 1673 阅读 · 0 评论 -
两万字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome 浏览器 Manifest V3 版本插件
两万字大章带你使用 Vue3、TypeScript、Less、Pinia、Naive-ui 以及 Vite 开发 Chrome V3 插件原创 2024-01-25 16:09:57 · 1877 阅读 · 3 评论 -
15000字大章带你一步一步使用Vue3开发chrome浏览器插件
之前写过一篇 chrome 浏览器插件开发的文章 全方面手把手从0到1带你开发谷歌浏览器插件 ,但是不是 vue/react 这种第三方框架的,是原生和 jquery 混合的,但是那种开发前端方式比较麻烦,所以下面是用 vue 来开发插件github地址:https://github.com/18055975947/my-vue3-plugin码云地址:https://gitee.com/guoqiankun/my-vue3-plugin一、创建 Vue 项目使用 vue-cli 创建 vu.原创 2020-12-31 14:00:00 · 6229 阅读 · 1 评论 -
Couldn‘t find package “postcss-normalize-string@^4.0.2“ required by “cssnano-preset-default@^4.0.0“
使用 vue-cli 创建 vue3.x 版本项目报错1、报错内容:error Couldn't find package "postcss-normalize-string@^4.0.2" required by "cssnano-preset-default@^4.0.0" on the "npm" registry.Error: Couldn't find package "@vue/cli-overlay@^4.5.9" required by "@vue/cli-service@~4.5.0原创 2020-12-31 11:56:59 · 2371 阅读 · 1 评论 -
使用Flask和vue-cli脚手架,开发vue3.x版本的python web 项目
使用 flask 和 vue-cli 脚手架,开发 vue3.x 版本的 python 与 typeScript web 项目目前 vue3.x 版本已经出来很久了,已经有不少UI库开发者和公司在使用3.x版本了。代码地址github地址:https://github.com/18055975947/python-flask-vue-web码云地址:https://gitee.com/guoqiankun/python-flask-vue-web一、创建项目1. 先用 pyCharm 创原创 2020-12-24 16:12:08 · 4963 阅读 · 0 评论 -
python使用flask和vue开发前端web项目,静态资源路径引入出错的问题
问题描述在 python 项目中,使用 flask 和 vue 创建和开发前端项目,在引入前端静态资源的时候,发现在 vue-cli3.x 及以上版本通过 yarn run build 打包之后,在 run.py 中引入路径不对问题解决在使用 vue-cli3.x 及以上版本生成的项目中,有个 public 文件夹,在此文件夹中有 index.html文件和一个 favicon.ico icon文件1、在 public 文件夹中创建 static 文件夹把 favicon.ico 放在 sta原创 2020-12-23 17:33:09 · 1165 阅读 · 0 评论 -
python中flask创建vue-cli3.X web项目,引入前端静态资源路径不对的问题解决方案
问题描述在 vue-cli3.X 及以上版本中,通过 yarn run build 生成的 dist 文件夹中是 js 文件夹和 css 文件夹,而在 flask 的 web 项目中,run.py 中的 Flask(__name, static_folder="") 中的 static_folder 只能设置一个值,所以这个时候就会有静态资源引入不了的问题问题解决1、解铃还须系铃人在 vue.config.js 文件中,设置assetsDir的值assetsDir 字段解释Type: stri原创 2020-12-23 17:07:34 · 426 阅读 · 0 评论 -
fabric.js 画板进行撤销、恢复和保存操作(上一步/下一步)
fabric.js 撤销、恢复和保存操作(上一步/下一步)const state = { saveLen: 0, deleLen: 0, operIndex: -1}window.saveOperateList = []window.deleteOperateList = []const getters = { }const mutations = { // 操作保存的数据 OPERATE_OPERATE_DATA (state) {原创 2020-11-17 15:09:51 · 5686 阅读 · 8 评论 -
location.search转为Vue Router的$route.query
location.search转为Vue的$route.query在重构的项目中,其他项目跳转到当前项目并不是通过location.hash来添加对应的参数的,而是通过加载到location.search里面来传递参数的,那我们就不能通过 Vue Router的 this.$route.query来获取参数了,我们可以直接取用location.search的值,或者把 location.search 转为 query 数据转化 location.search在main.js中// 一定要先注册原创 2020-11-16 11:56:32 · 1369 阅读 · 0 评论 -
Vue3.x中使用的 JS Proxy 代理
ProxyProxy 对象用于定义基本操作的自定义行为语法const p = new Proxy(target, handler)参数target要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。handler一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。handler 对象的方法handler 对象是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器(trap)。所有的捕捉原创 2020-09-15 14:10:37 · 894 阅读 · 0 评论 -
Vue3.x API
一、Application Config(app.config)config是一个包含Vue应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性:const app = Vue.createApp({})app.config = {...}1、devtools类型: boolean默认值: true (false in production builds)使用:app.config.devtools = true配置是否允许vue-devtools检查。此选项的默认原创 2020-09-11 16:46:50 · 1690 阅读 · 0 评论 -
Vue3.x和Vue2.x的不同之处
Vue3.x和Vue2.x的修改点1、main.js引入方式不一样// vue3 import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')// 没有全局的Vue// vue2.Ximport Vue from 'vue'import App from './App'Vue.config.productionTip = false/* eslint-disable原创 2020-09-10 15:06:06 · 691 阅读 · 3 评论 -
Vue3.x中的新增点
Vue3.x中的新增点1、多根节点组件在Vue 3中,组件现在正式支持多根节点组件,即片段!<template> <header>...</header> <main>...</main> <footer>...</footer></template>2、Teleport 传送Teleport提供了一种的方法,使我们可以控制要在DOM中哪个父对象下呈现HTML,而不必求助于全局状态原创 2020-09-10 15:00:26 · 1575 阅读 · 0 评论 -
创建Vue3.x项目、Vue3.x项目和2.x项目的不同点以及Vue3.x项目的新增点
Vue3项目的创建使用vue create proNamevue create vue3-pro 自动下载安装包或者npm init vite-app vue3-pro 不会自动下载安装包然后选中 Vue3,回车即可,自动下载安装包? Please pick a preset: Default ([Vue 2] babel, eslint) ❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select feat原创 2020-09-10 09:38:33 · 5519 阅读 · 1 评论 -
Vue自定义拖拽指令
Vue自定义拖拽指令定义指令//自定义drag指令Vue.directive('drag', { bind:function (el, binding) { let oDiv = el; //当前元素 let self = this; //上下文 oDiv.onmousedown = function (e) { //鼠标按下,计算当前元素距离可视区的距离 let disX = e.clientX原创 2020-08-03 15:23:53 · 724 阅读 · 0 评论 -
TypeError: loaderContext.getResolve is not a function
Vue 安装less less-loader 之后,使用 lang=“less”, TypeError: loaderContext.getResolve is not a function 的问题1、安装yarn add less less-loader --dev安装完成less、less-loader版本说明2、使用<style lang="less" scoped> .index{ .index_home{ color: red; } }</sty原创 2020-05-11 11:10:24 · 1495 阅读 · 0 评论 -
Vue中的虚拟dom(Virtual dom)
Vue Virtual Dom模板转换成视图的过程Vue.js通过编译将template 模板转换成渲染函数(render ) ,执行渲染函数就可以得到一个虚拟节点树在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。这个过程主要是将新旧虚拟节点进行差异对比,然后根据对比结果进行DOM操作来更新...原创 2020-05-08 17:23:30 · 407 阅读 · 0 评论 -
Vue 按需加载
Vue按需加载三种方式:vue异步组件、es提案的import()、webpack的require.ensure()一、vue异步组件技术vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。这种情况下一个组件生成一个js文件,如果项目量比较大,路由比较多,static里面的js文件会爆表。{ path: '/demo', name: 'demo'...原创 2019-12-03 16:12:06 · 293 阅读 · 0 评论 -
Vant Uploader和axios结合上传图片到后台获取url
Vant Uploader和axios结合上传图片到后台获取urlhtml代码:<van-uploader :after-read="afterRead" :upload-text="'上传图片'" :before-read="beforeRead" />上传js代码:/*** 上传图片之后调用接口*/afterRead (file) { this.upload...原创 2019-08-22 15:15:47 · 10235 阅读 · 7 评论 -
Vue的nextTick的实现原理
VUE中nextTick实现原理在vue中有nextTick这个API,官方解释,它可以在DOM更新完毕之后执行一个回调。一般使用this.$nextTick(() => { ...})一般来说,在对于MVVM框架结构的技术栈是不推荐操作DOM的,但是很多情况下可能会需要操作DOM,特别是一些charts插件等。所以nextTick就出现了,确保我们所操作的DOM是更新之后的...原创 2019-07-30 19:08:09 · 6559 阅读 · 3 评论 -
Vue项目局域网访问
Vue项目局域网访问vue-cli项目创建之后后端想通过局域网访问,然后进行项目调试。第一步:把config文件夹里面的index.js里面的dev开发配置的host设置为 host: “0.0.0.0”第二步:在build文件夹里面webpack.dev.conf.js里面的 devServer 加一个字段:disableHostCheck: true,//在 config -&g...原创 2019-07-30 17:35:31 · 1177 阅读 · 0 评论 -
Vant Uploader 文件上传
Uploader 文件上传使用 VantUI 的 Uploader 组件进行文件上传封装一个 upLoaderImg.js 公共方法//upLoaderImg.jsimport axios from 'axios' //引入axiosimport { Toast } from 'vant' //引入Toastfunction upLoaderImg (file) { //file为...原创 2019-07-05 10:11:29 · 30113 阅读 · 16 评论 -
Access-Control-Allow-Origin配置报错
前后端分离项目,后端配置允许跨域设置为*,接口请求报错但是接口又有返回值:两种解决办法:1、前端设置 withCredentials: falsewithCredentials:true, 这个字段的意思是允许携带cookie,但是这种报错是由于后端设置允许跨域的时候 Access-Control-Allow-Origin: 设置为 * ,导致报错,只要把 withCredential...原创 2019-05-20 10:33:16 · 7958 阅读 · 2 评论