项目生成后会有个.eslintrc.js文件 module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', // '@vue/standard', //将这行注释掉就好了. ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process

0. 基础要求 了解常见的 ES6 新特性 ES6 的导入导出语法 解构赋值 箭头函数 etc... 了解 vue 2.x 的基本使用 组件 常用的指令 生命周期函数 computed.watch.ref 等 1. 相关资源 [知乎 - Vue Function-based API RFC]https://zhuanlan.zhihu.com/p/68477600 [github - vuejs/composition-api]https://github.com/vuejs/compositi

最近准备做一个vue的小项目关于vue3的使用. 首先在vscode全局安装vue脚手架,npm i -g @vue/cli. 然后创建vue项目,vue create mydemo(项目名). 接下来就是选择一些安装的事项 这里推荐选择自定义安装,选择如下几个(如果会用typescript就把这个也勾上), 选择的方法是移动到选择项,按空格即可. 然后选择css预处理. 编码风格根据个人习惯选择,选择eslint能够更好的让你的代码规范,刚开始会非常不适应各种报错. 这2个都选上. 包的配置选

一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和自己的一顿操作后,我在这里记录一下自己的部署过程,方便以后查阅. 参考博客: https://segmentfault.com/a/1190000012186563?utm_source=tag-newest https://blog.csdn.net/weixin_43503511/article

文档: API Reference 教程 课件 1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S // ④ main,js import Vue from 'vue' import VueCompositionApi from '@vue/composition-api' Vue.use(VueCompositionApi) 2. setup方法

前言 在那天风雨交加的夜晚,Vue的创作者尤雨溪尤大大在b站直播分享了Vue.js 3.0 Beta最新进展.我对直播的内容进行了一下整理.整整用了三天的空余时间赶上了 1. 全新文档RFCs Vue.js 3.0 Beta发布后的工作重点是保证稳定性和推进各类库集成 所有的进度和文档都将在全新RFCs文档可以看到. 2. 六大亮点 Performance:性能更比Vue 2.0强. Tree shaking support:可以将无用模块“剪辑”,仅打包需要的. Composition API

Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的countdown组件. Vue Composition API文档: 如果对vue3语法还不熟悉的,可以先看一下语法 目前文档还是英文的,这里简单翻译下几个比较核心的东西: setup setup函数是一个新的组件option选项,作为在组件内使用Composition API的入口. 1. 调用时机 se

背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问

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

不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂的可以在下方评论,谢谢. github github: https://github.com/heiyehk/electron-vue3-inote 包下载 release: https://github.com/heiyehk/electron-vue3-inote/releases 接上篇配置篇

基于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

一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/gif图.图片/视频预览.网址查看.下拉刷新功能.红包/朋友圈等功能. 二.技术选型 编辑器:VScode/Sublime 使用技术:Vue3.x+Vuex4.x+Vue-Router4 UI组件库:Vant-UI3.x (有赞移动端Vue3组件库) 弹层组件:V3Popup(基于vue3.0封装自定

一.项目简介 基于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技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. 目前electron.js的star高达89.3K+,最新稳定版v11.2.3. 使用vue开发electron应用,网上有个比较火的脚手架electron-vue,不过里面的版本太低,而且使用的是vue2.x语法. 今天主要分享的是vue3语法开发electron应用,所以只能手动搭建开发环境.

上一篇有给大家分享过使用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

之前发布过一篇文章<Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统>,文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手和学习,随后也一直有收到留言和反馈,问我什么时候开源之类的问题,今天终于可以通知大家,完成啦!开源啦! 如果觉得我写得还行的话,请献上你宝贵的一赞,这将是我持续写作的动力!感谢大家啦. vue3-admin 开源地址 所有的代码.文件全部都开源到 GitHub 仓库中,前后端代码全部都在仓库里. 并没有任何藏

element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框(el-dialog). 拖拽演示 https://www.zhihu.com/zvideo/1380450791975731200 vue3 的自定义指令 directive 为啥选择自定义指令的方式来实现呢?一个是可以方便的获得 dom 便于操作,另一个是方便使用和封装. 自定义指令有两种注册方

1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组件实例初始化之前执行的(beforeCreated之前),是整个组件的入口函数,这个时候数据和方法还没有进行挂载,因此在setup中this并不会执行当前组件实例,也不能通过this获取组件中的数据和方法了. 在模板中使用到的变量和方法必须在setup中return出来,才能使用. export d

vue script setup 已经官宣定稿.本文主要翻译了来自 0040-script-setup 的内容. 摘要 在单文件组件(SFC)中引入一个新的 <script> 类型 setup.它向模板公开了所有的顶层绑定. 基础示例 <script setup> //imported components are also directly usable in template import Foo from './Foo.vue' import { ref } from 'vu