使用vite搭项目

使用Vite搭建Vue项目步骤
最新推荐文章于 2025-05-12 16:20:03 发布
原创 最新推荐文章于 2025-05-12 16:20:03 发布 · 367 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

①建立一个空目录，打开终端，输入：npm init @vitejs/app my-vue-app --template vue

②               cd my-vue-app
                  npm install
                  npm run dev

③

【前端工程化】一.前端工程化；二.使用webpack打包vue项目；三.在webstorm中安装vite插件，通过vite构建工具创建vue项目
weixin_44892365的博客
02-01 2760
【前端工程化】一.前端工程化;二.使用webpack打包vue项目;三.在webstorm中安装vite插件，通过vite构建工具创建vue项目
WebStorm 创建一个Vue项目
qq_60245590的博客
01-02 4241
这些技术和库之间协同工作以实现一个完整的Web应用程序，其中Vue.js用于构建前端界面，Axios用于处理HTTP请求，Node.js用于构建后端服务，CORS用于解决跨域问题，而Element UI提供了一套现成的Vue组件，用于构建用户界面。上述操作后会在安装目录中该路径下创建 node_modules 文件夹，如果该文件夹没有创建需手动创建。Vue CLI：@vue\cli所在路径，位于node_global\node_modules 文件夹中。见下图，项目创建完成！出现以下运行结果则安装成功！
webstorm 创建vue3 vite 项目
LlanyW的专栏
02-29 3633
直接在当前项目执行创建vue3项目指令，打开主页terminal。项目插件安装 npm install。打开Webstorm,创建一个空项目。回车后输入项目名字全部小写字母字。运行： npm run dev。
新建vite-vue3-ts项目
葡萄要吃山竹的博客
06-16 1046
输入项目名称 选择模板 选择模板 按照提示执行命令 配置指向目录 修改ts配置文件 tsconfig.json 新增baseUrl和paths 集成element-plus 安装 main.ts引入 集成路由 安装vue3的路由 创建文件 在main.ts中挂载 集成Vuex 安装支持vue3的vuex 创建文件 main.ts 挂载 集成HTTP工具 Axios 安装axios，和vue版本无关 配置axios 按照个人使用习惯，axios封装的方法放在 src/u
使用WebStorm开发Vue3项目
阿盘的博客
10-31 9217
记录一下使用WebStorm开发Vu3项目时的配置。
vue ElementPlus字体Vite_本项目基于vue3+ElementPlus+Typescript+Vite搭
09-16
整个项目采用模块化设计，每个功能组件都是独立的，可以轻松嵌入到其他项目中使用。此外，项目结构清晰，代码规范，注释详尽，便于开发者理解和维护。开发者在使用本模板搭建后台管理系统时，可以快速启动项目，并且...
使用vite重构vue-cli的vue3项目
owo_ovo的博客
05-12 1031
使用vite重构vue-cli的vue3项目
原生、vue、react的vite项目使用threejs的过程以及完整代码
最新发布
10-02
在使用Vite创建原生JavaScript项目时，可以无需依赖其他配置即可开始Three.js的开发。在项目_01_vanilla中，开发者可以使用纯JavaScript编写代码，并利用Three.js库来实现各种3D效果。由于该框架对语言没有限制，...
精选资源
vite搭建three.js的开发环境
01-06
本篇文章将详细介绍如何使用Vite搭建一个Three.js的开发环境。 首先，我们需要确保我们的系统已经安装了Node.js，因为Vite是基于Node.js运行的。如果尚未安装，可以访问https://nodejs.org/ 下载并安装适合你操作...
使用 Vite 尝鲜 React 18
浮沉半生的博客
07-30 910
React 18 目前已经开放 alpha 版本可以供我们体验了，那为了更方便快捷的体验 React 18 新特性，今天使用 Vite 搭建一个简易版的 React 开发环境，帮助我们快速尝鲜。
vite项目的创建
T01A98O的博客
03-13 236
然后根据提示，cd到项目目录，再npm install安装依赖，vite要自己进行安装一下依赖，不然会报错误。最后直接npm run dev就可以跑起来了。vite创建项目跟vue步骤差不多。
创建vite项目全流程
bestyinjun的专栏
08-04 3229
创建vite项目全流程，router、vuex、axios、eslint
在Vs-code/WebStorm中构建Vue项目
thwr1881的博客
08-13 1502
在Vs-code/WebStorm中构建Vue项目
【Webstorm】【vue】创建项目，及重要技术
weixin_62524256的博客
03-03 511
views文件夹下创建界面vue文件router文件夹下创建index.js，内容如下。
webstorm创建vue项目
菜鸟成长之路-wei的博客
06-01 9336
步骤 webstorm新建空项目project1 控制台输入vue create supermall 然后相关设置 gitee创建一个supermalll的仓库
Webstorm创建VUE项目
yht2004123的博客
04-14 483
1.安装完毕所有组件npm，node，webpack 2.在某个目录下创建项目：vue init webpack projectName 3.进入项目目录，cd projectName 4.启动项目 ，npm run dev 5.输入网址 localhot:8080 端口号为自己的，如下页面代表成功 6.将项目移植到Webstorm,使用webstrom打开项目 7.配置项...
如何创建vite项目!
xiaozhou4233的博客
01-21 918
官网：vite是一种新型前端构建工具，能够显著提升前端开发体验网络：vite是一个静态服务器，也可以说是一个开发的构建工具它的目标就是提供快速的开发体验和性能优化。
通过vite创建项目
m0_74356429的博客
04-03 3801
1.安装vite: npm install -g vite@latest2.创建项目： npm init vite@latest 项目名称 -- --template vue-ts3. cd 到项目目录之后运行。
创建项目vite使用的是7.1.0
08-09
<think>问题：创建Vite项目时使用了Vite 7.1.0，但现在需要安装的eslint-plugin-vue@9要求Vite 4.0.0，这显然存在版本冲突（因为7.1.0比4.0.0高，但实际上Vite的版本在3之后重新从0开始计数？注意：Vite的版本号在3.0之后是3.x，然后4.0是下一个大版本。但这里用户说使用了7.1.0，这可能是笔误，因为目前Vite最新版本是5.x，没有7.1.0。所以需要澄清） 但是，根据用户描述，他创建项目时使用的是vite 7.1.0，这可能是错误的版本号。实际上，Vite的版本号并没有达到7.x（截至2024年，Vite的最新版本是5.x）。因此，用户可能是指Vite的版本是3.x或4.x？或者用户可能把其他工具的版本号记错了？ 然而，错误信息中明确要求的是vite@"4.0.0"，而用户当前项目中的vite版本可能是其他版本（比如3.x或5.x），导致不满足peer dependency。 因此，解决方案是调整vite的版本到4.x，以匹配eslint-plugin-vue@9的要求。 但是，如果用户的项目已经使用了vite 5.x，那么eslint-plugin-vue@9可能不兼容。这时需要检查eslint-plugin-vue的文档，看是否有支持vite5的版本。通常，eslint-plugin-vue的较新版本会支持较新的vite。 然而，用户安装的是eslint-plugin-vue@9，这个版本要求vite4。如果用户项目使用的是vite5，那么可能需要升级eslint-plugin-vue到支持vite5的版本（比如v9.x的某个小版本或v10）。 但根据问题描述，用户安装的是eslint-plugin-vue@9，所以我们需要将vite降级到4.x，或者寻找一个同时支持vite5和eslint-plugin-vue的版本组合。 由于用户没有提供package.json，我们假设用户当前vite版本为7.1.0（这个版本号有误，我们忽略这个版本号，专注于错误信息）。根据错误信息，我们需要安装vite4.0.0。 因此，解决方案如下： 1. 将vite升级/降级到4.x版本（因为eslint-plugin-vue@9要求vite4.0.0，所以4.x都可以） 2. 或者，如果项目已经使用vite5，那么考虑使用支持vite5的eslint-plugin-vue版本（比如查看eslint-plugin-vue的文档，看哪个版本开始支持vite5） 但是，用户可能不想降级vite，那么我们可以尝试安装eslint-plugin-vue的更高版本（如果存在的话）。目前eslint-plugin-vue的最新版本是v9.15.1（截至2024年3月），它仍然要求vite4。而vite5是在2023年11月发布的，所以eslint-plugin-vue可能还没有更新支持vite5（或者已经支持，但需要查看具体版本）。 实际上，eslint-plugin-vue的v9版本要求vite4，而v10版本（如果存在）可能支持vite5。但目前（2024年3月）还没有v10版本。因此，如果用户使用vite5，那么可能需要等待eslint-plugin-vue更新，或者使用其他方式。 然而，在eslint-plugin-vue的github仓库中，我们可以发现v9.6.0版本已经支持了vite5（参考：https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.6.0）。所以，用户可以使用eslint-plugin-vue@9.6.0或更高版本（但低于10.0.0）来兼容vite5。 因此，有两种解决方案： 方案一：降级vite到4.x 方案二：升级eslint-plugin-vue到9.6.0+（如果项目使用vite5） 具体步骤： 方案一（降级vite）： ```bash npm install -D vite@4 ``` 方案二（升级eslint-plugin-vue，仅当使用vite5时）： ```bash npm install -D eslint-plugin-vue@9.6.0 ``` 另外，注意其他依赖的兼容性，比如@vitejs/plugin-vue也需要兼容vite4或vite5。对于vite4，使用@vitejs/plugin-vue@4；对于vite5，使用@vitejs/plugin-vue@5（目前最新是5.0.4）。 因此，如果用户使用vite5，那么应该安装： ```bash npm install -D vite@5 npm install -D eslint-plugin-vue@9.6.0 npm install -D @vitejs/plugin-vue@5 ``` 但是，用户最初安装的是eslint-plugin-vue@9（即9.x的最新版，可能已经包含9.6.0），所以如果用户已经安装了vite5，那么只需要确保eslint-plugin-vue版本>=9.6.0，并且@vitejs/plugin-vue版本为5.x即可。 根据用户最初的命令，他安装的是eslint-plugin-vue@9（即9.x的最新版）和@vitejs/plugin-vue@4（这个在vite5中可能不工作）。所以需要调整。 总结： 步骤： 1. 确定当前vite版本：如果用户项目已经使用vite5，则采用方案二；否则（vite3或4）采用方案一（降级到4.x）或保持4.x。 2. 根据错误信息，用户当前项目可能没有安装vite，或者安装了不兼容的版本。 由于用户说“创建项目vite使用的是7.1.0”，这很可能是笔误。我们假设用户实际使用的是vite5（因为目前没有7.1.0版本），那么我们可以这样解决： 重新安装依赖，确保版本兼容： 对于vite5项目： ```bash npm install -D vite@5 npm install -D eslint@8 eslint-plugin-vue@9.6.0 @typescript-eslint/parser@6 @typescript-eslint/eslint-plugin@6 @vitejs/plugin-vue@5 ``` 对于vite4项目： ```bash npm install -D vite@4 npm install -D eslint@8 eslint-plugin-vue@9 @typescript-eslint/parser@6 @typescript-eslint/eslint-plugin@6 @vitejs/plugin-vue@4 ``` 如果用户不确定，可以查看package.json中的vite版本，或者通过`npm ls vite`查看。 另外，注意：eslint-plugin-vue@9.6.0要求vite>=4.5.0，所以如果使用vite4，请确保vite版本>=4.5.0。 因此，更通用的做法是： 1. 如果用户项目使用vite5，则安装eslint-plugin-vue@9.6.0+和@vitejs/plugin-vue@5 2. 如果用户项目使用vite4，则安装eslint-plugin-vue@9（并确保vite>=4.5.0） 如果用户项目使用vite3或更早，则需要升级vite到4或5。 由于用户最初命令报错，我们假设用户当前vite版本不满足要求。因此，我们建议用户统一使用vite5（最新稳定版）并搭配兼容的插件版本。 完整命令（vite5）： ```bash npm install -D vite@5 npm install -D eslint@8 eslint-plugin-vue@9.6.0 @typescript-eslint/parser@6 @typescript-eslint/eslint-plugin@6 @vitejs/plugin-vue@5 ``` 注意：这里eslint-plugin-vue指定了9.6.0，但实际上可以安装9.x的最新版（因为9.6.0之后的版本都支持vite5）。所以也可以写`eslint-plugin-vue@9`，但npm可能会安装9.0.0（不满足），所以最好指定为`eslint-plugin-vue@^9.6.0`。 如果用户已经安装了不兼容的版本，可以先卸载： ```bash npm uninstall eslint-plugin-vue @vitejs/plugin-vue ``` 然后安装指定版本。 最后，验证安装：检查node_modules中eslint-plugin-vue的package.json，看它的peerDependencies中vite的要求是否满足。 由于问题描述中用户最初命令报错，我们按照vite5的解决方案给出代码。 代码示例（package.json的devDependencies部分）： ```json "devDependencies": { "vite": "^5.0.0", "eslint": "^8.0.0", "eslint-plugin-vue": "^9.6.0", "@typescript-eslint/parser": "^6.0.0", "@typescript-eslint/eslint-plugin": "^6.0.0", "@vitejs/plugin-vue": "^5.0.0" } ``` 安装命令就是上面的npm install命令。 解释： 1. 安装vite5作为开发依赖。 2. 安装eslint-plugin-vue的9.6.0或更高版本（但低于10.0.0），以支持vite5。 3. 安装@vitejs/plugin-vue的5.x版本，用于vite5的vue插件。 这样，peer dependency冲突应该可以解决。 如果用户坚持使用vite4，那么可以按照上面vite4的命令安装，并确保vite版本在4.5.0以上。 相关问题： 根据要求，提出4个相关问题。</think>### 问题分析 您在创建项目时使用了 Vite 7.1.0，但 `eslint-plugin-vue@9` 要求 Vite 4.0.0 或更高版本。这实际上是版本号误解 - Vite 的版本历史中并没有 7.1.0（截至2024年，Vite 最新版本是 5.x）。您可能指的是 Vite 的某个特定版本号，或者混淆了其他工具的版本。 ### 解决方案 #### 1. 确认并修复 Vite 版本 ```bash # 检查当前安装的 Vite 版本 npm list vite # 安装兼容的 Vite 4.x 版本 npm install vite@4 --save-dev # 安装其他依赖（确保版本兼容） npm install -D eslint@8 eslint-plugin-vue@9 @typescript-eslint/parser@6 @typescript-eslint/eslint-plugin@6 @vitejs/plugin-vue@4 ``` #### 2. 完整配置示例 **vite.config.js** ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { port: 5173, open: true }, resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) ``` **.eslintrc.cjs** ```javascript module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended' ], parser: 'vue-eslint-parser', parserOptions: { ecmaVersion: 'latest', parser: '@typescript-eslint/parser', sourceType: 'module' }, plugins: ['@typescript-eslint', 'vue'], rules: { 'vue/multi-word-component-names': 'off', '@typescript-eslint/no-explicit-any': 'off' } } ``` #### 3. 创建正确的 Vite 项目 如果您需要重新创建项目： ```bash # 创建 Vue + TypeScript 项目 npm create vite@4 my-vue-app -- --template vue-ts cd my-vue-app npm install -D eslint@8 eslint-plugin-vue@9 @typescript-eslint/parser@6 @typescript-eslint/eslint-plugin@6 ``` ### 版本兼容性参考 | 包名 | 推荐版本 | 兼容 Vite 版本 | |---------------------------|----------|----------------| | vite | ^4.0.0 | 4.x | | @vitejs/plugin-vue | ^4.0.0 | 4.x | | eslint-plugin-vue | ^9.0.0 | 需要 Vite 4.x | | vue | ^3.3.0 | 兼容 Vite 4.x | ### 常见问题排查 1. **版本冲突解决**： ```bash # 强制清理 npm 缓存 npm cache clean --force rm -rf node_modules package-lock.json npm install ``` 2. **检查依赖树**： ```bash npm list --depth=0 # 应该显示类似： # ├── eslint@8.x.x # ├── eslint-plugin-vue@9.x.x # ├── vite@4.x.x # └── vue@3.x.x ``` 3. **如果必须使用 Vite 5**： ```bash npm install vite@5 npm install eslint-plugin-vue@latest # v9.15+ 支持 Vite 5 npm install @vitejs/plugin-vue@latest # v5.x 支持 Vite 5 ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值