住房建设部官方网站设计费计取,深圳农产品网站制作,做动态图片的网站,网站服务器用哪个好文章目录 一、按需引入自定义组件#xff1a;unplugin-vue-components1. 安装[unplugin-vue-components]2. 在vite中使用 二、自动导入依赖包#xff1a;unplugin-auto-import1.安装2.vite.config.js配置3.使用效果 三、自动生成路由#xff1a;vite-plugin-pages1、安装2、… 文章目录 一、按需引入自定义组件unplugin-vue-components1. 安装[unplugin-vue-components]2. 在vite中使用 二、自动导入依赖包unplugin-auto-import1.安装2.vite.config.js配置3.使用效果 三、自动生成路由vite-plugin-pages1、安装2、配置-vite.config.js中配置3、配置-router/index.js配置,main.js中正常挂载路由4、route标签中科院对页面的路径进行修改优先级大于自动生成的路径5、自动生成vue-router的路由遵循的规则 四、自动生成模拟数据vite-plugin-mock1.安装vite-plugin-mock2.vite.config.js文件配置3.在根目录创建mock文件夹创建index.js4.使用 一、按需引入自定义组件unplugin-vue-components
unplugin-vue-components插件可以在Vue文件中自动引入组件包括项目自身的组件和各种组件库中的组件
使用此插件后不需要手动编写import { Button } from ant-design-vue’这样的代码了插件会自动识别template中使用的自定义组件并自动注册。
1. 安装[unplugin-vue-components]
npm install unplugin-vue-components2. 在vite中使用
import Components from unplugin-vue-components/vite // 按需加载自定义组件
import { ElementPlusResolver } from unplugin-vue-components/resolversexport default defineConfig {// ...plugins: [// 按需引入Components({deep: true, // 搜索子目录dirs: [src/components], // 按需加载的文件夹resolvers: [ ElementPlusResolver() ] // ElementPlus按需加载})],// ...
}这样就可以在页面中直接使用element-plus组件了是的不需要在main.ts里导入element-plus然后进行Vue.use就是这么厉害直接在页面中用就完事了并且按需加载组件和样式非常的强大
二、自动导入依赖包unplugin-auto-import
模块化已经是现代 Web 开发必不可少的开发方式频繁引入依赖包是一个常见的操作。但是手动引入依赖包往往繁琐尤其是当依赖包数量较多时会显著降低开发效率。
unplugin-auto-import 插件可以帮助我们在项目中自动导入常用的使用的第三方库的 API就可以方便我们开发提升开发效率。
1.安装
npm i -D unplugin-auto-import2.vite.config.js配置
import AutoImport from unplugin-auto-import/vite
export default defineConfig({plugins: [...AutoImport ({imports: [vue, vue-router,pinia], //自动引入vue的ref、toRefs、onmounted等无需在页面中再次引入resolvers:[ElementPlusResolver()]})]
})3.使用效果
以 Vue 为例在没有使用自动导入前需要手写以下的 import 语句
import { computed, ref } from vue
const count ref(0)
const doubled computed(() count.value * 2)使用 unplugin-auto-import 插件后
const count ref(0)
const doubled computed(() count.value * 2)三、自动生成路由vite-plugin-pages
使用 vite-plugin-pages 之后就可以更高效快捷开发。
只需要在目录写好对应页面即可自动生成路由,上面的路由对应的文件结构如下。
注意 当然这里使用了 pages ,因为是默认配置,你也可以配置成原来大家更习惯的 views 。
1、安装
vite-plugin-pages 依赖vue-router运行因此还需要安装vue-router
npm install -D vite-plugin-pages
npm install vue-router2、配置-vite.config.js中配置
import Pages from vite-plugin-pagesexport default {plugins: [// ...Pages({dirs: src/views, // 需要生成路由的文件目录默认就是识别src下面的pages文件exclude: [**/components/*.vue], // 排除在外的目录上面配置目录的例子里面有 components 目录我们不希望他被解析为路由extendRoute(route, parent) {if(route.path/) return { ...route,redirect:page1 }//给默认路由加一个redirect默认为index.vue}}),],
}3、配置-router/index.js配置,main.js中正常挂载路由
import { createRouter, createWebHistory } from vue-router;
import routes from ~pages;
const router createRouter({history: createWebHistory(),routes,
});
export default router;4、route标签中科院对页面的路径进行修改优先级大于自动生成的路径
route
{name: name-override,meta: {requiresAuth: false}
}
/route5、自动生成vue-router的路由遵循的规则 src/views/index.vue - / src/views/index/a.vue - /a // 这里的a.vue就是index.vue的子路由children src/views/father.vue - /father src/views/father/son.vue - /father/son src/views/father/[id].vue - /father/:id src/views/[father]/son.vue - /:father/son src/views/[…all].vue -文件用来适配404页面 四、自动生成模拟数据vite-plugin-mock
vite-plugin-mock 是一个用于在开发过程中模拟数据的插件它可以帮助你在前端开发中更方便地进行测试和开发。
通过使用 vite-plugin-mock你可以在开发环境中轻松地模拟后端接口返回的数据从而避免因后端接口未准备好而影响前端开发进度。同时该插件还支持自定义模拟数据和全局模拟数据方便你在不同场景下进行测试和开发。
使用 vite-plugin-mock你需要先安装它然后在 Vite 配置文件中配置该插件最后在你的组件或页面中使用 importMock 或 defineMock 方法来模拟数据。具体使用方法可以参考文档或示例代码。
1.安装vite-plugin-mock
npm i mockjs -s
npm i vite-plugin-mock -D2.vite.config.js文件配置
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import { viteMockServe } from vite-plugin-mockexport default defineConfig({plugins: [vue(),viteMockServe({mockPath: mock,//解析根目录下的mock文件夹}),]
})3.在根目录创建mock文件夹创建index.js
import mockJS from mockjs
const userList mockJS.mock({data|100: [{name: cname,id|1: 1}]
})const userListData [{method: post,url: /api/users,response: ({body}) {return {code: 200,msg: success,data: userList}}
}]export default userListData4.使用
script setup
import { ref, reactive, watch, computed, onMounted } from vue;
onMounted(() {fetch(/api/users, { method: post }).then((res) {console.log(res);});
});
/script
