Advertisement

Vue 3、Vite 2 和 Vant 3 共同构建的开发栈。

  • 5星
  •     浏览量: 0
  •     大小:None
  •      文件类型：None

简介：
Vue 3、Vite 2 和 Vant 3 构成了当前流行的前端开发技术栈，其中 Vue 3 是一个现代化的 JavaScript 框架，Vite 2 则是一种快速的构建工具，而 Vant 3 是一个基于 Vue.js 的设计系统，提供了丰富的 UI 组件。这三个技术的结合，能够显著提升前端开发的效率和用户体验。

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • Vue 3 Element Plus TypeScript：使用 Vue CLI Vite 和 Vue 3.0 构建
    优质
    本项目采用Vue 3、Element Plus和TypeScript开发，利用Vue CLI结合Vite工具进行构建，提供高效稳定的前端应用框架。 基于vue-cli / vite + vue3.0 + element-plus + typescript + mock数据的后台管理系统列表页增删改查功能介绍： Vue-CLI版： Vite版： 系统模块的数据采用mock数据，使用了Vue3.0全家桶、Element-plus和typescript。实践了Vue3.0的新特性以及vite打包工具，并采用了vue3.0的组合API。体验到了vue3和typescript的特点，同时也利用了vite等页面功能。 列表页包括增删改查操作： 在项目中运用了vue3 composition api 和 typescript ，提供类型检查支持。 模拟数据用于测试接口返回的数据，使用typescript泛型来约束接口返回的数据格式。 通过yarn install进行编译和热重装以方便开发。
  • Ant Design Vue 3 Admin: 基于 Vite 2 的 Vue 3 和 TypeScript 框架项目
    优质
    Ant Design Vue 3 Admin 是一个采用Vite 2构建工具，结合Vue 3和TypeScript的语言生态，旨在提供高效且可维护性的前端开发解决方案的框架项目。 ant-design-vue3-admin 是一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用。它采用了最新的技术栈，并提供统一的技术规范和权限方案（包括路由、菜单和操作）。此外，该系统还支持多语言功能以及数据 mock 功能，适用于不同设备的预览需求。相关文档提供了脚手架和一些通用部分的提取方法，方便单独使用。convue 是一个类似于 umi.js 的插件，基于 vite 开发；而 convue-lib 则包含了通用组件、样式及工具方法。
  • vue-demi：:top_hat:助力Vue 2和3的通用库开发
    优质
    vue-demi是一款强大的工具库，旨在简化在Vue 2和Vue 3之间共享代码的过程。它提供了一套API兼容层，使开发者能够轻松地编写同时支持两个版本的应用程序或库，无需担心不兼容的问题。无论你是想为两种版本的Vue创建一个通用组件还是开发一套可复用的功能模块，“vue-demi”都是你不可或缺的好帮手。 Vue Demi 是一个正在开发的实用程序，允许您为 Vue 2 和 Vue 3 编写通用库。 使用方法： 将其安装为插件依赖项： ```bash npm i vue-demi # 或者 yarn add vue-demi ``` 将 `vue` 和 `@vuecomposition-api` 添加到插件的对等依赖项中，以指定您支持的版本： ```json { dependencies: { vue-demi: latest }, peerDependencies: { @vuecomposition-api: ^1.0.0-beta.1 } } ``` 这样就能确保您的库与 Vue 的不同版本兼容。
  • vue3vite基础脚手架构(Vue 3+ Vite版本)
    优质
    基于Vue 3.x的Vite核心组件库
  • 基于Django 4和Vue 3的Python全栈开发与部署方案
    优质
    本项目提供一套结合Django 4后端框架与Vue 3前端框架的Python全栈解决方案，并详细介绍其开发流程及部署方法。 对于有后端开发背景的朋友来说，如果想转向全栈开发，这是一份不错的参考教程。不过需要具备一定的Python基础和Vue基础。
  • 如何在 Vue 3 和 Vite 中使用 Bootstrap 5
    优质
    本教程将指导开发者如何在现代前端项目中集成流行的UI框架Bootstrap 5，具体介绍在Vue 3和构建工具Vite环境下快速高效地配置及应用Bootstrap的相关技巧。 在本段落中，我们将学习如何将 Bootstrap 5 集成到 Vue 3 的项目中。我们会使用 Vite 来作为开发服务器，并且展示怎样把 Bootstrap 5 引入我们的 Vue 3 应用。 首先，我们需要安装 Bootstrap 5 和 Popper.js（这是 Bootstrap 所需的依赖项）。这可以通过运行以下命令来完成： ``` npm i --save bootstrap @popperjs/core ``` 然后，为了使用 SCSS 文件，我们还需要 SASS 开发工具。可以执行如下命令进行安装： ``` npm i --save-dev sass ``` 接下来，在 `vite.config.js` 中添加一个别名来指向 Bootstrap 5 的位置： ```javascript alias: { ~bootstrap: path.resolve(__dirname, node_modules/bootstrap) } ``` 在项目中的 `assets` 文件夹下创建一个新的 SCSS 文件（例如，名为 my.scss），并在其中导入 Bootstrap 5 的 SCSS 文件： ```scss @import ~bootstrap/scss/bootstrap; ``` 然后，在 `src/main.js` 中引入我们刚创建的样式文件，并且加载所有的 Bootstrap JavaScript 插件： ```javascript import ./assets/my.scss; import * as bootstrap from bootstrap; ``` 最后，测试集成是否成功。在 `src/App.vue` 文件中添加一个按钮并应用 Bootstrap 的类来检查样式是否生效： ```html ``` 通过以上步骤，我们就能顺利地将 Bootstrap 5 集成到 Vue 3 应用，并使用 Vite 开发服务器进行开发和测试。
  • H5Vue：使用Vue和Vant构建的H5通用框架（含CLI 3/4及TypeScript版）- 源码
    优质
    H5Vue是一个基于Vue.js和Vant组件库开发的高效前端H5框架，提供CLI工具支持快速项目搭建，兼容Vue CLI 3及4版本，并支持TypeScript。 开发一个基于Vue+Vant的H5通用架子项目的主要目标是让前端开发者能够快速上手并开始工作。该项目包括以下主要功能： - 常用目录别名：简化路径引用，提高代码可读性。 - Vant/Rem适配：按照Vant官网推荐的方式进行组件按需引入，并根据官方指导配置了Rem适配方案以确保在不同设备上具有良好的显示效果。这涉及到调整postcss的autoprefixer设置中的browsers选项为overrideBrowser。 主要功能还包括： - scss支持、_mixin.scss和_variables.scss文件，用于统一管理和重用样式。 - 页面切换动画及组件缓存（keepAlive）：提供流畅的页面过渡体验并优化性能。 - 自动注册路由表/自动注册Vuex: 简化配置步骤，减少手动操作错误的可能性。 - svg图标引入：支持SVG格式图标的使用和管理。 - mock server与axios封装、api管理：帮助开发者在开发阶段模拟API请求，提高前后端协作效率。 - 用户鉴权机制以及vuex-loading插件的集成：确保应用的安全性和用户体验的一致性。 - vo-pages/dayjs/vconsole等实用工具或库的应用。 以上配置和功能旨在提供一个高效且易用的基础框架，帮助前端开发人员快速构建高质量的H5项目。
  • Vue 3开发工具（Vue-DevTools）
    优质
    Vue-DevTools是一款专为Vue.js开发者设计的浏览器扩展程序，提供组件状态检查、时间旅行调试等功能，助力高效开发与问题排查。 这是Vue3的开发者工具。使用方法是解压文件后，将工具拖拽到浏览器的开发者工具里面即可。
  • 基于 Vite 5.x、Vue 3.x 和 Arco Design 2.x 的全新前端框架 Vue-Admin-Arco
    优质
    简介：Vue-Admin-Arco 是一个采用 Vite 5.x、Vue 3.x 和 Arco Design 2.x 构建的现代化前端框架，提供高效开发工具与组件库，助力开发者构建高质量企业级应用。 对比其他开源 admin 框架的优势如下： 1. 支持前端控制路由权限 intelligence 和后端控制路由权限 all 模式。 2. 在已知的 vue admin 开源框架中，首家支持 mock 自动生成并自动导出功能。 3. 提供超过 50 项全局精细化配置选项。 4. 支持 scss 自动排序以及 eslint 的自动修复功能。 5. 对 axios 进行了细致封装，支持多数据源和多种成功 code 数组。同时兼容 application/json;charset=UTF-8 和 application/x-www-form-urlencoded;charset=UTF-8 等多种传参方式。 6. 支持登录时使用 RSA 加密技术。 7. 打包完成后可自动生成 7Z 压缩文件。 8. 提供 errorlog 错误拦截功能，便于调试和维护。 9. 具备多主题及布局切换的能力。 使用本项目需要注意以下几点： 1. 默认采用 lf 换行符而非 crlf 换行符，在创建新文件时请确保选择正确的换行格式。 2. 使用了最严格的 eslint 规范（plugin:vuerecommended），建议配置开发工具实现自动修复。推荐在 vscode 中进行开发工作。 3. 项目采用 MIT 开源许可协议，这是允许范围内的宽松授权方式。