刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本. 在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验性提案的提示,在 V3.2 中,才会去除提示并移除一些废弃的 API. script setup 是啥? 是 vue3 的新语法糖,并不是新增的功能模块,只是简化了以往的组合式 API 必须返回(return)的写法,并且有更好的运行时性能. 写法简便: <script setup> ... &l

一.项目搭建 vite是尤大大开发的一款意图取代webpack的工具.其实现原理是利用ES6的import发送请求加载文件的特性.拦截这些请求,做一些编译,省去webpack冗长的打包时间.并将其与Rollup捆绑在一起用于生产.在开发过程中没有捆绑.源代码中的ES Import语法直接提供给浏览器,浏览器通过本机 1.全局安装vite脚手架 npm install -g create-vite-app 2.使用脚手架创建项目 create-vite-app projectName 3.进入项目

一.选择合适的ide 推荐使用vs code编辑器,界面清晰.使用方便,控制台功能很好用.webstorm也可以,看个人喜好. 二.ui框架选择 目前,pc端一般是选择element ui(饿了么),移动端的框架比较多,mint ui(饿了么,已不提供更新).vant ui(有赞).cube-ui(滴滴),我这里要做一个移动端小程序,所以选择了cube-ui(https://didi.github.io/cube-ui/#/zh-CN) 三.安装cube-ui 根据cube-ui官网,vue-c

一.搭建工作环境环境 1.从node.js官网下载相应版本进行安装即可 https://nodejs.org/zh-cn/download/,安装完成后在命令行输入  node -v 如果可以查询到版本号,说明安装成功. 2.node自带npm包管理工具,在命令行输入  npm -v 如果查询到版本号,说明正常 3.npm下载太慢,需要下载国内淘宝镜像: npm install -g cnpm --registry = https://registry.npm.taobao.org,安装完成后输

人云亦云,并不会让你变得有多优秀,而会让你越来越随大流. 当你和别的开发在聊到 Vue 3.0 版本发布,有哪些亮点时,你的答案之一肯定有"它变得更快了,性能上快了 1.2 - 2倍". 那么我就想问你,是什么让 Vue 变快了,尤大已经在 beta 版的线上直播上告诉了我们答案. PatchFlag(静态标记) Vue 2.x 中的虚拟 DOM 是全量对比的模式,而到了 Vue 3.0 开始,新增了静态标记(PatchFlag). 在更新前的节点进行对比的时候,只会去对比带有静态标记

大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI组件,积累了一些素材,现在分享给大家. 本文讨论的主题包括: 为什么使用第三方组件库 第三方UI库比对 选型的依据 我选的选型 为什么使用第三方组件库 现在这个年代,好像问这么一个问题很傻,谁会自己造轮子呢?确实是这样.但是对于刚毕业的同学,或者从Ext.js年代过来的同学可能不会觉得奇怪.因为在前

vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. ========================== 新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) : <template><div class="form"> <input v-mo

vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. ========================== 首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到.下面最终的实现效果图: 改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 dat

前言 不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢. 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳. 现在vite2发布了,官网也有了,网上也能找到大佬写的相关资料,时机应该成熟可以往里跳了. 所以打算做个开源博客,一边做这个小项目,一边学习 vite2 和vue3,还有相关知识. 为啥选择博客呢?因为功能相对比较简单,不考虑皮肤等功能的话. 而且大家都比较熟悉,没写过博客总看过博文吧. 所以呢,业务需求方面一说

本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官方定义.用法.源码浅析三个维度来一起看看它们. 下文是关于Vue3全局Api的内容,大家如果有更好的理解和想法,可以在评论区留言,每条我都会回复~ 全局API 全局API是直接在Vue上挂载方法,在Vue中,全局API一共有13个.分别是: createapp 返回一个提供应用上下文的应用实例: h

两年前曾自学过几天vue,那时候版本还是vue2,但后来项目中一直没用到,当时也觉得学习成本太高,便没有继续学习下去.初学者可以看下链接文章以前的吐槽~~ 学习 Vue ,从入门到放弃 最近部门决定升级架构,vue便又被安排上日程,打开官网发现版本已经升级到vue3,而且vue3跟vue2相比无论作者从底层开发还是组件搭建都有不少变化,不过优点是变得容易学了~~ 官方中文文档:https://vue3js.cn/docs/zh/guide/introduction.html#vue-js-%E6

入门 Vue3的教程很少,官方网站实例不好整,另外由于Python的Django也掌握了,学习这个有些让人眼乱.Vue项目创建后,在public目录下面自动生成了一个index.htm,里面有个div id="app",这就是简单实例中需要mount的入口,整了半天才发现. Vue程序的入口,是main.js文件,里面要完成以下工作. 导入createApp import createApp from "vue" 注意这个vue,我的理解应该是js/vue.js这个

一.前言 昨晚可能是因为更新完文章后,导致过于兴奋睡不着(写代码确实太容易让人兴奋了),结果两点多才睡着,大东北果然还是太冷了. 不知道是不是因为膝盖和脚都是冰凉的,所以才导致很晚才能入睡? 刚眯了一会,大约一个小时吧,感觉不错,接着又想学习了. 二.列表界面展示示例 现在要做的就是把打到页面的数据,带样式,也就是说好看点显示. 之前我们在<Vue3学习(二)之 集成Ant Design Vue>这篇文章中,有提及组件的使用,对于一个前端不是很好(后端也不咋的),本着拿来主义,我们能现成的是最

一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vue 在大量数据需要展示时,我们一般都会以报表的形式展现,按照直觉习惯,肯定使用table表格来展示行列数据. 因此,我们要使用Ant Design Vue组件库中的table组件,来进行数据的绑定. 1.官网地址 官网地址:https://2x.antdv.com/components/table-

项目搭建好了之后是不是可以编码了呢? 等等不要着急,我们是不是应该先设计一下?比如博客的功能等? 博客设计 先做个简单的个人博客,因为是个人版,所以可以省略注册.登录这些功能,表结构也可以简单一点. 基础功能:添加博文.显示博文.博文列表+查询+分页.讨论列表和添加讨论. 虽然功能弱了一点,但是麻雀虽小五脏俱全,vite2 和 vue3 的基础用法也可以体现一些. 功能设计 是不是做成图更明显一些? 代码设计 model设计 model代码 先来看看 model 的代码. /src/model/

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

一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x. 对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持. 二.组件的使用 官网地址: https://2x.antdv.com/docs/vue/getti

一.安装axios npm install axios@0.21.0 --save 二.axios的使用 1.在主页中引用axios 在Vue3新增了setup初始化方法,所以我们在这里开始使用并测试,示例代码如下: <template> <a-layout> <a-layout-sider width="200" style="background: #fff"> <a-menu mode="inline&quo

一.写在前面 说来还是比较惭愧的,从周二开始事就比较多,周三还电脑坏了,然后修电脑等等一些杂事,忙的团团转,因为周二.周三自己走的过多了,导致不敢直腰,周四卧床一天. 之前都听说<陈情令>特别火,肖战和王一博正是因为这部剧火的,而大多数人,也因为这部剧,被肖战和王一博圈粉. 而我可能是个例外吧,不点评什么,我怕我的评论区,爆炸哈哈,万一被围攻呢? 我比较喜欢温宁这个角色,也就是居中的鬼将军,整部剧是2倍速看完的,主要都在看他,哈哈. 今天状态好点,就接着来更新了,下面就来更文了. 二.与Vue

本篇文章主要目的就是想告诉我身边,正在学 vue3 或者 准备学 vue3 的同学,vue3中网络请求axios该如何使用,防止接触了一点点 vue3 的同学会有个疑问?生命周期.router .vux使用都改变了,那 axios 使用有没有啥改变? 小姐姐 使用 axios 之前,需要先安装好. yarn add axios npm install axios bower install axios <script src="https://unpkg.com/axios/dist/ax

本篇文章干货较多,建议收藏! 从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API.由于选项式API一个变量存在于多处,如果出现问题时,就需要去多个函数内检查,项目较大时,遇到问题,增加排故的难度.所以 vue3 中新增了 setup 配置项,用它来写组合式API. 一.选项式API 和 组合式API 区别 有些同学稀里糊涂用了vue一年了,竟然不知道选项式api !你是那个同学吗?是的话,赶紧收藏起来. vue2 中的 Opti