首先我们得有图标 这里我们从网上下载svg文件或者UI给你导出svg文件 我们在src 文件下新建一个放置svg 文件 的文件夹 @/src/icons.将所有 icon 放在这个文件夹下. 创建 icon-component 组件 <template> <svg :class="svgClass" aria-hidden="true" :color="svgColor" > <use :xlink:href=&qu

vue3修改link中标签默认icon,vue3初次使用的时候不好好阅读配置难免会遇到一些坑,本人在项目完结的时候打算把浏览器的导航小icon图标给替换了,可是并没有那么顺利,那么如何在vue3中替换默认的icon(favicon.ico)的导航栏图标呢: public的index.html有这么一句话,毫无疑问,一看给人的感觉就是在这个位置替换了 而且favicon.ico也是小图标,于是我直接替换,发现并不生效(特殊情况),把<%= BASE_BA %>直接改成./发现也不生效,怎么回事呢

1.环境准备,以下都是我的版本.自己在官网上面下载需要的版本. 尝试了Python3.7.3在创建vue3项目时出现问题. node.js10.16.0, python2.7.16, yarn1.16.0, VSCode1.35.0 2.VSCode中安装插件. (英文好的跳过第一步) (1)Chinese Simplified Language,完成之后Ctrl+Shift+p,出现搜索框,录入Configure Display Language,选择zh-cn,然后重启VSCode. (2)

前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于项目逻辑简单,只使用了少量 API,我只是写这个小项目过把手瘾,所以对应标题 上手.如果您只是想学习 vue 周边的 API,那么,这篇文章将给您带来有限的知识. 初始化项目 使用 vite 初始化 vue3 项目.什么是 vite?Vite 是一个 Web 构建工具.开发过程中通过浏览器 ES M

本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue 3 项目 yarn create vite-app my-site cd my-site yarn yarn dev 运行输出: ❯ yarn dev yarn run v1.22.10 warning package.json: No license field $ vite vite v1.0.

不要让自己的上限成为你的底线 前言 诈尸更新系列,为了跟上脚步,尝试了vue3,在学习vue3的时候顺便学习一手electron和ts,本教程将分别发布,源码会在最后的文章发布.因为还在开发中,目前也是为了防止有些遇到坑不会及时忘掉,所以先整理一部分出来 将分2部分发出教程,因为配置的东西个人感觉有点多并且跟开发内容相关的东西并不是很多,因此单独发出,见谅,第二篇这两天发出,长文警告!. 开发思路: 页面: 列表页index.vue 头部.搜索.内容部分,只能有一个列表页存在 设置页settin

基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框组件,集合msg.alert.dialog.modal.actionSheet.toast等多种效果.支持20+种自定义参数配置,旨在通过极简的布局.精简的调用方式解决多样化的弹框场景. v3popup 在开发之初参考借鉴了Vant3.ElementPlus等组件化思想.并且功能效果和之前vue2.

基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0开发的多功能PC网页端自定义弹窗组件.拥有超过10+种弹窗类型.30+种参数配置,支持拖拽(自定义拖拽区域).缩放.最大化.全屏及自定义置顶层叠等功能. v3layer的开发灵感同样来自之前v2版本,在功能效果上和之前的保持同步一致性. ◆ 引入组件 // 在main.js中全局引入组件 impor

突发奇想 这几天整理了一下vue的几种使用方式,对比之后发现有很多相似之处,那么是不是可以混合使用呢?比如这样: vue的全家桶和UI库,采用传统的方式加载(CND.script). 自己写的js代码,采用ES6的 import 方式加载. 目录结构采用vuecli建立的项目的目录结构. 入口页面用vite项目的 index.html. 不用babel做转义(因为还不会用). 不用webpack(因为总是报错,头痛...). 这种结合会怎么样?我们来看看具体情况. 心急的可以先看看在线演示:ht

一.项目简介 基于vue3.x+vuex+vue-router+element-plus+v3layer+v3scroll等技术构建的仿微信web桌面端聊天实战项目Vue3-Webchat.基本上实现发送消息+emoj表情.图片/视频查看.链接预览.粘贴截图/拖拽发送图片.红包/朋友圈等功能. 二.使用技术 编码器:Vscode 技术框架:Vue3.0.5+Vuex4+VueRouter@4 UI组件库:Element-Plus (饿了么桌面端vue3组件库) 弹窗组件:V3Layer(基于vu

上一篇有给大家分享过使用vue3和electron快速搭建项目.创建多窗口/父子modal窗口的一些方法.今天继续给大家分享一些vue3.x+electron11项目开发中的一些知识点/踩坑记录,希望对你有帮助~~ 1.vue3+electron实现QQ登录界面 <template> <div> <div class="ntMain__cont flex1 flexbox flex-col"> <div class="nt__lgre

基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技术构建跨平台模仿QQ|TIM界面聊天应用.实现了发送富文本消息.图片/视频/链接预览.拖拽发送图片.调用dll截图.朋友圈等功能.支持多开窗口|父子modal窗口.换肤等操作. 一.技术栈 编码工具:vscode 框架技术:vue3.0+electron11.2.3+vuex4+vue-rou

我们再来看一下管理类的设计. Composition API,就是组合API的意思,那么是不是应该把js代码分离出来,做成独立的管理类的形式呢? 这样代码可以更整洁一些,主要是setup里面的代码就不会乱掉了. 管理类 import webSQLHelp from '../store/websql-help' import { blog, blogForm, blogList, articleList, discuss, discussList } from './blogModel' impo

前言: 在"VUE3后台管理系统[模板构建]"文章中,详细的介绍了我使用vue3.0和vite2.0构建的后台管理系统,虽然只是简单的一个后台管理系统,其中涉及的技术基本都覆盖了,基于vue3的vue-router和vuex,以及借助第三方开源插件来实现vuex数据持久化.前边只是介绍了vue后台管理系统的页面布局,以及一些常用的插件的使用,如:富文本编辑器.视频播放器.页面滚动条美化(前边忘记介绍了,此次文章中将会进行添加和补充). 本次文章主要介绍的是vue-router的动态匹配

基于vue3.0.11+electron13仿制macOS桌面UI管理系统ElectronVue3MacUI. 前段时间有分享一个vue3结合electron12开发后台管理系统项目.今天要分享的是最新研发的跨平台仿macOS桌面UI管理框架.使用了最新前端技术electron13+vite2.3+vue3搭建开发.支持多窗口.动态壁纸.程序坞DOCK菜单.可拖拽等功能. 一.实现技术 编辑器:Vscode 框架技术:Vite2.3.4+Vue3.0.11+Vuex4+VueRouter@4 跨

系统简介 此管理系统是基于Vite2和Vue3.0构建生成的后台管理系统.目的在于学习vite和vue3等新技术,以便于后续用于实际开发工作中: 本文章将从管理系统页面布局.vue路由鉴权.vuex状态管理.数据持久化.用户信息加密等方面进行介绍和记录: 这也是我边学习边实践的过程,此次记录一是方便自己日后开发过程中有用到时候便于借鉴和复习,再次是为了初学vue3和尝试上手vite2和vue3搭建管理系统的小伙伴提供一些学习方法和技术点: 本Vue后台管理系统使用的技术点主要有:vite2.vu

从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到Electron的整合.可以独立的当作一个内容来进行阅读. 项目创建 创建目录electron-vue3-webpack并进入执行npm init命令.设置了基础的项目信息后,我们开始本次的环境搭建之旅. 使用webpack 前置条件 基本熟悉webpack是什么以及它打包的运行处理过程. 环境准备 前

基于ABP Vnext的二次开发,前端 vue3.0,Typescript,Ant Design Vue ,Vben Admin 的后台管理框架. 技术点 Net Core5.0 ABP Vnext Vben Admin Redis MySql RabbitMq Hangfire DDD IdentityServer4 dotnetcore.CAP Ocelot Consul 开始 项目结构 后端 . ├── Directory.Build.props nuget 版本控制 ├── framew

前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完全重写了一遍.虽然名字叫cli,其实两个库都是基于vue-cli创建的.做这个的目的是为了工作中快速启动项目,毕竟切片打包.less.axios.vuex.router.UI框架.基础文件目录.权限,这些都是基操,当然项目不同,还是要做些调整的.这两个项目的master分支都是最基础的东西,里面还包

写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前端时代,最近在面试前端工程师的过程中,有感而发,技术更新迭代快,学习成本高.浏览了各大博客论坛,千差万别,比较混乱.最终决定参考 Element UI 的设计风格,主题色选择紫色(受到 MaterialDesignInXamlToolkit 的影响),写一套基于 Vue3 的 UI 框架库和对应的官

Vue3项目的创建与运行 本文记录下自己近期学习的Vue3项目的创建,以及如何去运行一个Vue应用,同时包括对Vue项目结构进行一个简单的介绍. 一.node与npm的安装 通常平常进行开发的同学应该都已经具备node环境了,如果还没有的同学可以直接去node官网进行下载,npm会随node一同安装下来. 安装完成后可以通过以下的命令来查看node和npm是否安装成功 node -v 会输出node的版本 npm -v 会输出npm的版本 二.Vue应用的创建 cmd进入需要创建项目的文件夹目录