Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]

发布时间：2024-01-17

Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)

推荐整理分享Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

本文为快速搭建vite4项目，一些插件的详情就不做过多的解释，都放有官网链接，需要深入了解的小伙伴可自行查看。至于为什么选择使用vite，因为它具备着快速启动、按需编译、模块热更新的亮点。归根结底最大的特点就是快。vue的创始人是尤雨溪大佬，vite也是他。所以放心大胆的用吧。

壹、初始化项目 😆😆😆😆1️⃣ 通过yarn初始化项目

yarn create vite 你的项目名称 --template vue-ts

注：如果没有yarn的可通过npm执行命令npm install -g yarn进行安装

2️⃣ 如下图，到这里我们的vite项目就初始化好了，跟着提示，进入ts-super-web(自己的项目名)根目录下执行yarn，下载完依赖后执行yarn dev就可以启动项目。

3️⃣ 启动成功以后浏览器访问http://127.0.0.1:5173/ 👇👇👇👇

贰、安装相关依赖 😜😜😜😜1️⃣ element-plus为UI框架。pinia和vuex一样为状态管理。vue-router路由。nprogress顶部进度条。animate.css一个跨浏览器的动画库。yarn add element-plus pinia vue-router nprogress animate.css2️⃣ 安装图标库yarn add @iconify-json/carbon @iconify-json/ep @iconify-json/noto -D3️⃣ 按需引入涉及到的依赖安装yarn add unplugin-vue-components unplugin-auto-import unplugin-icons -D4️⃣ 其他依赖安装，支持sass，jsx等等yarn add sass sass-loader @types/node @vitejs/plugin-vue-jsx -D5️⃣ 项目根目录下修改tsconfig.json{ "compilerOptions": { "target": "esnext", // 目标语言的版本 "useDefineForClassFields": true, "module": "esnext", // 生成代码的模板标准 "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入 "strict": true, // 开启所有严格的类型检查 "jsx": "preserve", // 指定将 JSX 编译成什么形式 "jsxFactory": "h", // 当使用经典的JSX运行时编译JSX元素时，更改.js文件中调用的函数，默认：React.createElement 。 "jsxFragmentFactory": "Fragment", "sourceMap": true, // 生成目标文件的sourceMap文件 "resolveJsonModule": true, // 指定 JSX 片段工厂函数在指定了 jsxFactory 编译器选项的情况下针对 react JSX 发出时使用。 "esModuleInterop": true, // 允许export=导出，由import from 导入 // TS需要引用的库，即

本文链接地址:https://www.jiuchutong.com/zhishi/299951.html 转载请保留说明！

上一篇：openCV 第四篇角点检测、图像特征、图片拼接(opencv讲解)

下一篇：YOLOv5的head详解(yolov5 output)