Vue 3.0 Viter构建项目

学习过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样式规则，以控制标签的外观、布局和动画效果。

• 其实更细化一些部分如图 :

这三个大的组件部分在前端开发中经常被使用，它们分别负责展示、行为和样式方面的功能，共同构建了一个完整的前端组件。通过将它们结合使用；