从0到1带你学习如何搭建vben后台管理系统系列文章目录

一.准备工作:技术选型基础环境的搭建

---

前言

前端日趋复杂化的今天，我们仅仅会使用一门技术是不够用的，还必须知道它是怎么架构的，只有这样才能提升我们的职场竞争力，才能独当一面的去主导一个项目的开发！基于此，当你看到这篇文章的时候，我们就开始了通往前端尖兵的路上！祝大家学有所称，学有所用！

---

一、技术选型

• “vue”: “^3.2.47”,
• “vue-i18n”: “^9.2.2”,
• “vue-router”: “^4.1.6”,
• “vite”: “^4.3.0-beta.2”
• “pinia”: “2.0.33”,

二、生成基础项目

参考搭建基本架子

三、安装步骤

配置好node环境,根目录生成package.json文件

npm init -y

{
  "name": "vbenapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装对应的依赖，保持版本号一致

npm install / yarn 

跑起项目

yarn dev

---

总结

项目结构

vbenapp
├─ .gitignore
├─ index.html
├─ package.json
├─ public
│  └─ vite.svg
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ vue.svg
│  ├─ components
│  │  └─ HelloWorld.vue
│  ├─ main.ts
│  ├─ style.css
│  └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
├─ vite.config.ts
└─ yarn.lock

以上就是今天要讲的内容，本文基础篇，介绍了如何搭建基础的架子，安装依赖，运行项目，接下我们会继续深入。。