怎么做网盘搜索网站,深圳全网信息流推广公司,教育机构做网站素材,wordpress主题如何修改1. Vite 简介 Vite是新一代的前端构建工具#xff0c;在尤雨溪开发Vue3.0的时候诞生。类似于Webpack Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码#xff0c;在服务器端按需编译返回#xff0c;完全跳过了打包这个概念#xff0c;服务器随起随用。生产中利用…1. Vite 简介 Vite是新一代的前端构建工具在尤雨溪开发Vue3.0的时候诞生。类似于Webpack Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码在服务器端按需编译返回完全跳过了打包这个概念服务器随起随用。生产中利用Rollup作为打包工具号称下一代的前端构建工具。 vite 是一种新型的前端构建工具能够显著的提升前端开发者的体验。它主要有俩部分组成 一个开发服务器它基于原生的es模块提供了丰富的内建功能如速度快到惊人的模块热更新HMR. 一套构建指令使用Rollup打包代码并且它是预构建的可输出用于生产环境的高度优化过的静态资源。
1.1 VS Webpack Webpack是近年来使用量最大同时社区最完善的前端打包构建工具新出的5.x版本对构建细节进行了优化在部分场景下打包速度提升明显。Webpack在启动时会先构建项目模块的依赖图如果在项目中的某个地方改动了代码Webpack则会对相关的依赖重新打包随着项目的增大其打包速度也会下降。 Vite相比于Webpack而言没有打包的过程而是直接启动了一个开发服务器devServer。Vite劫持浏览器的HTTP请求在后端进行相应的处理将项目中使用的文件通过简单的分解与整合然后再返回给浏览器(整个过程没有对文件进行打包编译)。所以编译速度很快。
2. TS简介 TypeScript是微软开发的一个开源的编程语言通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码可运行在任何浏览器任何操作系统。 TypeScript 是一种由微软开发的自由和开源的编程语言它是 JavaScript 的一个超集扩展了 JavaScript 的语法。
3. Vue3ViteTS 项目创建
说明 当前使用TS表明之前项目中使用到的js文件需要修改为ts文件例如router中的index.js 需要改为 index.ts 文件之前的main.js 文件现在已变为 main.ts 文件。
3.1 项目创建指令 npm create vuelatest 例如创建vueproject项目执行如下 3.2 启动项目 3.3 默认创建项目的访问页面 4. 项目初始化
4.1 相关插件安装
# 字体图标库 npm install font-awesome
#qs是用于解析和格式化URL查询字符串的外置模块库
npm install qs
4.2 main.ts 中引入 font-awesome 4.3 TS 是不能解析 后缀vue文件的因此使用vue文件必须在env.d.ts 中添加如下命令
declare module *.vue {import type {DefineComponent} from vue;const component:DefineComponent{},{},anyexport default component;}
效果如下 4.4 清除src/components 目录下默认的文件
4.5 清除src/App.vue中的内容添加 router-view 组件修改之后如下 4.6 App.vue 的 style 样式中可以存放所有页面公共的样式如下
style*{margin: 0;padding: 0;}html,body,#app{width: 100%;height: 100%;font-family: 微软雅黑;}a{text-decoration: none;}ul,ol{list-style: none;}
/style
5. Vue3项目整合路由
5.1 安装路由插件
npm install vue-router
5.2 项目src目录下创建router目录并在router目录下常见index.ts 文件 5.3 index.ts 内具体内容如下 5.4 main.ts 中配置 router 6. Vue3项目整合Axios
6.1 安装axios 插件
npm install axios
6.2 在main.ts中进行axios 基础路径的配置 7. 页面相关内容
说明模拟功能首页面中显示商品的类型点击某个商品类型显示对应的商家列表点击商品类型之后连接后台服务获取类型对应的商家列表并将商家列表显示到页面上
7.1 在src根目录下创建views目录
7.2 在views目录下创建 Index.vue \ BusinessList.vue
7.3 创建两个页面对应的路由地址 7.4 Index.vue 核心代码主要看vue语法糖的代码
templatediv classwrapper!--点餐分类--ul classfoodtypeli clicktoBusinessList(1)img src../assets/dcfl01.png/p美食/p/lili clicktoBusinessList(2)img src../assets/dcfl02.png/p早餐/p/lili clicktoBusinessList(3)img src../assets/dcfl03.png/p跑腿代购/p/li/ul!--部分功能代码省略--/div
/template
script setupimport Footer from /components/Footer.vueimport { useRouter } from vue-router;let router useRouter()function toBusinessList(orderTypeId){router.push({path: /businessList,query:{orderTypeId:orderTypeId}})}/script
style scoped/**样式 具体代码 省略 */
/style
7.5 BusinessList.vue核心代码主要看vue语法糖的代码
templatediv classwrapper!--header部分--headerp商家列表/p/header!--商家列表部分--ul classbusinessli v-foritem in businessArr clicktoBusinessInfo(item.businessId)div classbusiness-imgimg :srcitem.businessImg//divdiv classbusiness-infoh3{{item.businessName}}/h3p#165;{{item.starPrice}} 起送 | #165;{{item.deliveryPrice}} 配送/pp{{item.businessExplain}}/p/div/li/ul!--底部菜单功能--Footer/Footer/div
/template
script setupimport Footer from /components/Footer.vueimport { onMounted,reactive, ref, toRefs } from vue;import { useRoute } from vue-router;import axios from axios;let route useRoute()let businessArr ref([])let orderTypeId ref()//-:获取router中query传递过来的内容orderTypeId.value route.query.orderTypeId//-页面先加载onMounted()方法此方法类似于 created()方法优先于页面渲染而执行的代码onMounted((){let url /BusinessController/listBusinessByOrderTypeld?orderTypeIdorderTypeId.value;//-:请求后端服务axios.get(url).then(function(response){if(response.data.code200){businessArr.value response.data.data}else{response.data.message;}}).catch(function(error){console.log(error)})})/script
style scoped/** 具体 样式 省略*/
/style 启动项目进行测试即可。
8. 补充 qs 的使用案例 axios.post(/OrdersController/listOrdersByUserId,qs.stringify({userId:this.user.userId})).then(response{let result response.data.data;console.log(result)for(let orders of result){orders.isShowDetailet false;}this.orderArr result;}).catch(error{console.error(error);}); //注册请求axios.post(/UserController/saveUser, qs.stringify(this.user)).then(response {if(response.data0){alert(注册成功);this.$router.go(-1);}else{alert(注册失败);}}).catch(error {console.error(error);});
至此整理完毕。
