镜像站wordpress,网络服务代码1001,公司网络组建设计,做网站注册页面模板目录 一、Vite概述 二、Vite构建Vue3工程化项目 三、ViteVue3项目目录结构 四、ViteVue3项目组件#xff08;SFC入门#xff09; 五、ViteVue3样式导入方式 六、ViteVue3响应式数据和setup语法糖 一、Vite概述 Vite是一种新型前端构建工具,能够显著提升前端开发体验;Vite结合… 目录 一、Vite概述 二、Vite构建Vue3工程化项目 三、ViteVue3项目目录结构 四、ViteVue3项目组件SFC入门 五、ViteVue3样式导入方式 六、ViteVue3响应式数据和setup语法糖 一、Vite概述 Vite是一种新型前端构建工具,能够显著提升前端开发体验;Vite结合NPM可以自动构建前端项目工程化所需的标准目录结构并且提供项目的打包和运行功能。 二、Vite构建Vue3工程化项目 1、构建项目 Vite会自定生成如下工程目录结构 2、进入到工程目录下拉取package.json文件中指定的依赖框架 3、研发模式运行当前项目 说明打开Local指定的网址即可浏览器预览当前Vite构建的工程CtrlC结束研发模式运行。 三、ViteVue3项目目录结构 四、ViteVue3项目组件SFC入门 传统方式开发一个网页需要html、css和js等多个文件组成一个网页这种方式被称为多文件组件然而这种开发方式代码复用度低不宜于维护。SFC单文件组件就是将一个网页拆分为多个*.vue格式的组件所构成的网页每个*.vue组件里面由style、script和template标签构成分别用于存放传统的css、js和html代码。然后将这些*.vue组件组合在一起就构成了一个页面这种单文件组件化的开发方式代码复用度高易于后期网页的维护升级。 五、ViteVue3样式导入方式  5.1 在.vue文件中的style标签内编写css样式代码只作用于当前.vue文件中的template标签 5.2 将css样式单独放在一个文件内那个.vue文件需要就将其直接导入即可css样式复用 在style标签内引入css样式文件 在script标签内引入css样式文件 5.3 将css文件作用于所有的.vue文件只需将其在main.js文件中导入即可。这样其它的.html文件在使用script标签引入main.js文件后实际上就会自动将css样式放在.html文件的head标签中作为样式导入。 六、ViteVue3响应式数据和setup语法糖 响应式数据当变量的值发生变化时vue框架会自动将变量最新的值更新到DOM树中从而浏览器显示变量最新的值。 非响应式数据 当变量数据的值发生变化时vue框架并不会将其最新值更新到DOM树中浏览器显示的数据不会发生变化。 在vue2中变量数据的值默认是响应式的。在vue3中数据默认是非响应式的只有通过ref或reactive函数将变量转化为响应式数据转化时只需将vue框架中的此两个函数ref或reactive函数导入即可。 如 import {函数名} from vue 注意ref函数转化的响应式数据,在script标签中操作时需要使用“变量.value”的形式才能访问到数据。 声明“山月润无声”博主知识水平有限以上文章如有不妥之处欢迎广大IT爱好者指正小弟定当虚心受教