如何创建vite项目?vite配置elementplus报错?
大家好,我是Smile。
今天给大家分享如何使用 vite搭建vue3 项目及可能遇到的相关问题。欢迎朋友们多多指教,多多支持~
安装 | Element Plus
vite+vue3 相关知识记录
使用vite搭建vue3.0项目_Smile_ping的博客-CSDN博客
vite常用配置_Smile_ping的博客-CSDN博客_vite配置
vite配置环境变量与模式_Smile_ping的博客-CSDN博客_vite build .env.production
创建vite项目按照顺序执行如下命令,即可基于 vite 创建 vue 3.x 的工程项目npm init vite-app 项目名称 cd 项目名称 npm install npm run dev
安装并使用element plus根据官方文档安装、根据需求配置,这里选择官方推荐按需导入 方式# 选择一个你喜欢的包管理器 # NPM $ npm install element-plus --save # Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus
按需导入: 首先需要安装unplugin-vue-components 和 unplugin-auto-import 这两款插件npm install -D unplugin-vue-components unplugin-auto-import
配置vite.config.js // vite.config.ts import { defineConfig } from "vite" import AutoImport from "unplugin-auto-import/vite" import Components from "unplugin-vue-components/vite" import { ElementPlusResolver } from "unplugin-vue-components/resolvers" export default defineConfig({ // ... plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], })
至此顺利的话,可以正常运行项目啦。
报错问题部分截图,原因: 当前 vite 版本过低
当前vite版本
解决方案卸载 重新安装 vite 版本,当前最新版本"vite": "^4.1.1" npm install vite -D
运行报错安装 vite 成功后,重新启动运行报错原因: 当前 node 版本【14.15.1】与 vite 版本【4.1.1】不匹配,导致报错查看所有 node版本命令:npm view node versions
解决版本不兼容问题我这里选择升级 node 版本【14.18.2】,当然也可以选择降级 vite 版本处理。
node版本升级后,运行报错node 版本升级后,项目运行报错,如下图
继续解决报错问题根据提示:安装@vitejs/plugin-vue npm i @vitejs/plugin-vue -S
这时如果直接运行,会出现如下错误,需要配置文件中导入插件
在vite.config.js 配置文件中导入并使用@vitejs/plugin-vue import { defineConfig } from "vite" // ... import vue from "@vitejs/plugin-vue" export default defineConfig({ plugins: [ vue(), // ... ], })
成功解决当前问题npm run dev 成功启动项目~当前 package.json 文件
创作不易,欢迎老铁们互动关注,点点赞,收藏不迷路~