独立开发者系列(29)——vue3开发前置梳理

前端开发必备的基础框架,这节总结梳理下vue3的一些特性和开发。作为前端项目的预置基础。梳理下全部需要的技术栈,也方便下次开发回来进行索引。

环境安装(工具和环境,重要)

安装node (如果安装成功过,直接node -v 检查下对应版本 需要node版本大于15),在这篇文章里面我们已经完成过搭建 独立开发者系列(2)------搭建常用语言运行环境

安装vue npm init vue@latest 执行命令后 完成

官方推荐开发IDE 是vscode ,IDE很关键,在之前我开发VUE使用的是phpstorm,结果发现开发效率很低,专业的工具+插件可以针对性的让编码效率提升几倍。导入命令安装的代码基础结构,vscode会提示安装官方插件Vue.volar 扩展,能自动识别vue的相关模板。

项目的目的结构认识:

如果引入插件,需要在package.json里面添加,vite.config.js是vue的项目配置。

启动项目 npm run dev 项目启动时可以直接运行 浏览器里面已经可以看到你loalhost:5173 可以开始调试开发对应的vue程序代码 (每次开发)

如何让代码在vscode里面实现HB里面 实时开发代码 右边实时显示结果,这样不用来回在浏览器和IDE之间来回切换,大幅度提升效率。相比使用phpstorm开发前端,vscode优势明显,加上内置IDE更明显. 安装vscode的插件Browse Lite ``轻量浏览器,然后再页面找到输入命令面板

输入 Browse Lite Open... ``然后就可以看到我们代码和浏览器同步打开。

然后我们想实现一个编辑跳转的效果 我们在A页面点击一个vue, 就会跳转到对应的vue页面去进行改动开发(类似JAVA/PYTHON 的IDE 函数跟踪功能),需要安装 Vue Peek``,然后就可以搜索。

环境已经配置好,代码引入也设置好。现在开始梳理vue3的基础使用语法。

首先我们来实现第一个效果:

一个输入框,如果我们填入的数字大于100,点击确认的时候,会显示一行字 提示我们输入的数值符合要求

``,

在可以看到{{inputVaule}}的模板语法,v-model的双向绑定值用法 触发函数事件 @click v-if的用法 vue的<script>的响应式变来京

函数的定义 const handleClick=() =>{} 箭头写法 返回对应的变量

一些vue里面的相关新概念列表: (传统div+css没有的)

  1. 理解vue里面的虚拟dom vue在每次组件变动会创建一个新的虚拟dom,并和之前dom进行比较,将不同部分更新上去
  2. 数据的双向绑定上面例子里面 v-model 就是绑定了变量和input 俩者任意变动,都会造成变量值和input值变动 双向绑定 所以只要只要改变数据的值,input也自动改变了
  3. 理解响应式系统 传统的代码里面,改变后需要刷新页面,而在vue里面,数据变动会被劫持,所以可以实时响应数据(这个概念很有用,热更新概念)

基础代码逻辑已经走通,下一步,是打包逻辑。我们开发好的代码,需要打包并发布。暂停我们之前的npm run dev 重新运行命令行 npm run build

这样就完成默认的打包,只要我们将我们dist里面的代码直接发布,就完成了我们本次代码的开发。

在开发工作量比较小的时候,传统的开发速度更快捷一些,当开发量明显增大的时候,vue就方便很多。

相关推荐
万少18 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL24 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0239 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang41 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼43 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试