独立开发者系列(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就方便很多。

相关推荐
djk88882 分钟前
Layui Table 行号
前端·javascript·layui
NightCyberpunk1 小时前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ1 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
zhangjr05753 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱3 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七3 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼3 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态3 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态