首页 / 资讯中心 / 文章详情

从零搭建【pnpm+Vue3+TS+Setup+VueRouter4+Pinia+Axios+ElementPlus (unplugin 按需)】仿若依后台

从零搭建【pnpm+Vue3+TS+Setup+VueRouter4+Pinia+Axios+ElementPlus (unplugin 按需)】仿若依后台 ★ FEATURED ARTICLE
从零搭建【pnpmVue3TSSetupVueRouter4PiniaAxiosElementPlus (unplugin 按需)】仿若依后台项目特点全部script setup组合式语法抛弃选项式目录结构优化layout和components同级不和 views 嵌套区别原版若依环境变量拆分.env.development/.env.production手写 mock不引入 mockjs 插件支持一键切换「本地模拟数据 / 真实后端接口」Element Plus 使用 unplugin 自动按需导入不用全量引入用 pnpmTypescriptVue Router4PiniaAxios第 0 章前置准备0.1 环境要求Node.js 18.x推荐 20 LTSpnpm 已经安装安装 pnpm终端执行npm install -g pnpm检查版本node -v pnpm -v✅ 输出版号即正常。第 1 章使用 pnpm create vuelatest 创建基础 Vue3TS 项目1.1 创建项目命令打开终端cd 到你想要存放项目的文件夹执行pnpm create vuelatest然后交互式选项严格按下面选重点✔ Project name: … vue3-admin ✔ Add TypeScript? … Yes ✔ Add JSX Support? … No ✔ Add Vue Router for Single Page Application development? … Yes ✔ Add Pinia for state management? … Yes ✔ Add Vitest for Unit testing? … No ✔ Add an End-to-End Testing Solution? … No ✔ Add ESLint for code quality? … Yes ✔ Add Prettier for code formatting? … Yes项目名vue3-admin创建完成提示cd vue3-admin pnpm install pnpm dev1.2 进入项目 安装依赖cd vue3-admin pnpm install1.3 启动开发服务测试pnpm dev浏览器打开提示地址一般 http://localhost:5173/看到 vue 默认欢迎页面代表基础项目创建成功。✅ 本章测试点pnpm create vue 成功生成目录pnpm install 无报错pnpm dev 启动网页正常打开你现在执行完这一步确认有没有报错网页能不能打开。
阅读完成 · 觉得有帮助?
咨询建站