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

相关推荐
四喜花露水4 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy13 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie43 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao3 小时前
npm install慢
前端·npm·node.js