vite搭建vue3项目（vue3+vite+js+vant+eslint+postcss+pinia+vueRouter+unocss）

最新推荐文章于 2024-05-22 19:52:16 发布

zhuà!

最新推荐文章于 2024-05-22 19:52:16 发布

阅读量401

点赞数 3

文章标签： javascript postcss 前端

本文链接：https://blog.youkuaiyun.com/m0_51430102/article/details/139121776

版权

叮！快来看看我和文心一言的奇妙对话～点击链接 https://yiyan.baidu.com/share/SCBas5UQAK – 文心一言，既能写文案、读文档，又能绘画聊天、写诗做表，你的全能伙伴！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhuà!

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

qq_44423029的博客

08-17

6万+

超详细步骤vite创建vue3项目，技术栈vue3+ts+vite+element-plus+pinia，跟着做就搭出来了（保姆级）

vue3+ts+vite+elementPlus后台管理系统学习总结01

joan_yb的博客

01-11

1381

vue3+ts+vite+elementPlus后台管理系统学习总结01

参与评论您还未登录，请先登录后发表或查看评论

vue3+vite+ts使用Element+Plus

zouxin_88的专栏

11-09

337

7.保存运行，就可以看到按钮了。但是按钮显示不正确，这是index.css导致的。5.在App.vue的<script lang="ts">标签下添加。在App.vue的template标签下添加按钮。8.去掉index.css中的相关内容，现在显示正常了。6.在export default中添加。1.安装Element+Plus。2.在index.html中加入。3.修改main.ts。

从0开始搭建一个vue3+vite+ts+pinia+element-plus的项目

qq_45780736的博客

03-09

6361

自学搭建vue3+ts+vite+pinia+element-plus项目

使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件

都随它大小便吧

02-28

2922

记录一下使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化

05-12

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...

vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass

02-08

在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 vue3：...

vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript

02-08

在使用该架构前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite、vue3和typescript，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配等功能 vue3：...

Vue3+Vite+Ts+Pinia+....一个快速开发vue3的模板框架，快速搭建前台应用.zip

02-08

综上所述，这个压缩包提供了一个基于Vue3、Vite、Typescript和Pinia的前端模板，适用于开发高效、稳定的企业级应用。通过这个框架，开发者可以快速启动新项目，同时享受到现代化前端工具带来的便利和性能提升。使用...

类肯德基自助点餐系统01(Vue3.2 + Vite + TS + Vant + Pinia + MongDB）Vue H5项目

03-04

3、0.1.0版本已成功搭建Less、Vant、vw适配方案、Vue Rotuer、Pinia和Axios； 4、项目在gitee同步更新，请点个star：https://gitee.com/airheaven/kfg-vue 使用方法： 1、解压文件包，放入VSCode； 2、终端cd进入...

手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统

烊烊的博客

03-12

5665

快速帮你搭建vue3+ts+vite+element-plus简易后台管理系统

vue3+vite+ts+vueRouter+vuex+axios+element-plus搭建项目框架

仰望半月

02-28

3308

本项目框架是基于，对vite 快速创建的框架做出的二次封装。

Vue3+Vite+TS使用elementPlus时踩的坑

dashenfeng1的博客

06-05

1610

在学习Vue3时，想使用elementPlus来绘制页面，但是根据教程导入的时候就报了一堆错，记录一下，后面几天换新电脑了估计还得走一遍。

Vue3 + Vite + Element Plus 项目搭建（全）

Yana's Blog

05-06

7556

本文使用 Vue3 + Vite + Element Plus + Vue Router + Pinia + Typescript 搭建项目。

vite创建vue3引入elementui-plus + vue-router4过程_element vue route vite(2)

2401_84617356的博客

05-16

404

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue3+Vite+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages（vitepress文档渲染.vue组件-推荐使用第二种）

wocwin的博客

02-07

1万+

Vue3 + Vite +Ts+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages;Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件

Vue3 + TS + Vite + Pinia + Route4 + ElementPlus + Markdown

aizhemeilishen的博客

05-22

248

Vue3 + TS + Vite + Pinia + Route4 + ElementPlus + Markdown搭建项目

vite+vue3+ts 手把手教你创建一个vue3项目

最新发布

12-29

### 使用 Vue3 + Vue Router + Axios + Vant4 构建前端 UI 并与 Spring Boot 后端集成 #### 安装依赖库为了构建基于 Vue3 的移动端应用程序，首先需要安装必要的依赖包。 ```bash npm install vue@next vue-router pinia axios vant ``` 对于按需加载 Vant 组件可以采用如下方式[^1]: ```javascript // main.js 或者 main.ts 中 import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.use(createPinia()); app.use(router); app.mount('#app'); ``` 针对 Vant 库的具体引入方法有两种： - **全量引入** ```javascript import Vue from 'vue' import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` - **按需引入** 如果使用 `babel-plugin-import` 插件，则可以通过以下方式进行更高效的组件引入： ```json { "plugins": [ ["import", { "libraryName": "vant", "style": true }] ] } ``` 接着可以直接单独引入所需的组件及其样式文件： ```javascript import Button from 'vant/lib/button'; import 'vant/lib/button/style'; ``` #### 配置路由创建 `router/index.js` 文件来定义应用中的不同页面之间的导航逻辑。假设存在一个名为 Home 的视图组件位于 `/src/views/HomeView.vue` 下面是一个简单的例子: ```javascript // router/index.js import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; export default createRouter({ history: createWebHistory(), routes: [{ path: '/', name: 'home', component: HomeView, }], }); ``` 在主入口文件(main.js)中注册路由器实例以便在整个应用程序范围内可用. #### 设置 API 请求拦截器通过 Axios 实现前后端交互功能前先设置好请求的基础URL以及一些默认参数等配置项，并添加响应/错误处理机制以增强用户体验。 ```typescript // src/api/request.ts import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API || '', // api base_url timeout: 5000 // request timeout }); service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); service.interceptors.response.use( response => response.data, error => Promise.reject(error) ); export default service; ``` #### 创建环境变量为了让开发者能够在不同的环境中轻松切换API服务器地址和其他敏感信息而不必硬编码这些值到源码里去，在项目的根目录下分别建立`.env.development` 和 `.env.production`两个文件用于区分开发模式和生产环境下各自对应的配置选项[^3]. 例如 .env.development 可能看起来像这样: ``` VUE_APP_BASE_API=http://localhost:8080/ NODE_ENV=development PORT=3000 ``` 而 .env.production 则可能是这样的形式: ``` VUE_APP_BASE_API=https://your-production-server.com/ NODE_ENV=production ``` #### 整合后端服务当完成了上述准备工作之后就可以着手于实际业务逻辑实现了。通常情况下会涉及到向SpringBoot提供的RESTful Web Service发起GET / POST类型的HTTP请求获取数据或者提交表单等等操作。下面给出一段调用远程接口查询用户列表的例子作为参考[^4]: ```javascript async function fetchUsers() { try { let res = await axios.get('/api/users'); console.log(res.data); } catch(err){ console.error(err.message); } } ``` 需要注意的是如果前后端不在同一个域名之下还需要考虑跨域资源共享(CORS)的问题可以在 vite.config.ts 中做相应的代理配置让本地调试更加方便快捷. ```typescript server: { port: 8002, host: '0.0.0.0', open: true, proxy: { '/api': { target: 'http://localhost:8080/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, ```