学习过Vue3 的朋友们都知道 Vue3是基于Vue2 的基础上演变的 在Vue2的基础上加入了许多的新特性: 最关键的部分就是采用了组合式编码风格的方式来进行前端的开发;
Vue2.0 是基于elementUI 官方文档而设计的
关于Vue2.0 将在2023年年底停止更新 所以学习Vue3 是未来前端的一个必备的一项技术 我们将通过Vue3的官方网档进入学习
地址:快速上手 | Vue.js (vuejs.org)
https://cn.vuejs.org/guide/quick-start.html
下面跟着步伐来一点点认识Vue3:
1:构建项目:
这里我们选用Vite 来对前端项目进行构建 Vite 它是一款前端的构建工具
它的优点就是将一些浏览器无法解析的文件，转化成可以被浏览器解析的 js 文件
废话不说 直接上手:
注(需要node.js 版本需要20 ,npm 版本在10左右才能够使用vite构建工具噢)
配置好环境就可以开始构建第一个vite项目了
通过Vite 安装命令
npm create vite@latest my-vue -app 构建我们的项目
（注第一次使用vue 构建项目有一个记忆选项 : 这里我们勾选一些比较重要的配置 比如router路由 支持typescript 选项 ）
然后根据下面的执行命令步骤执行 就可以了
启动 npm run dev 这里会有一个对应的项目地址
构建完项目将我们的构建的项目拖至我们的开发工具当中进行 语法展示: 这里我已经将项目拖拽至我的前端开发工具 Vscode当中
这个APP.vue 在不设置 页面路由的前提下 默认启动的时候是 进入当前页
我们就在这里进行Vue3.0的语法的展示:
通过安装vue3 插件能够快速的为我们规范组件格式
这里大概展示一下组件的一些相关默认标签部分的作用:
其主体分为 三个部分
-
Template组件用于展示标签内容，它主要用于定义模板结构，并根据数据对象的值来生成相应的HTML内容。
-
Script组件用于处理JavaScript行为，它主要用于对标签内容进行动态操作。可以在Script组件中编写JavaScript代码，以响应事件、修改数据、执行计算等。
-
Style组件用于设置组件的样式，它主要用于定义标签内容的格式。您可以在Style组件中编写CSS样式规则，以控制标签的外观、布局和动画效果。
-
其实更细化一些部分如图 :
这三个大的组件部分在前端开发中经常被使用，它们分别负责展示、行为和样式方面的功能，共同构建了一个完整的前端组件。通过将它们结合使用；
