Vue3打造属于自己的中后台框架

736 阅读2分钟

为什么要打造自己的中后台项目

目前市面上基于Vue中台前端项目非常多,如:Ant Design VueVben AdminNaive AdminVue Element Admin等。

这些框架都非常优秀,他们奠定了中台前端框架的基础。但是,在使用过程中总有些地方不尽人意,不是无法满足业务,就是满足业务但是收费。

最重要的是,作为程序员,难道你就不想了解,到底是怎么做?思路是什么?难道我们就做不到么?

答案是:我们肯定能做到,而且,不是很难。

技术栈

看到这里,恭喜你🍭🍬,我们已经在思想上达成了初步统一,那么接下来就是我们用什么技术。
其实都不用我说,肯定用Vue,因为我我的标题就是Vue。🤪🤪🤪

Vue的技术栈最新的就是一下搭配:

Vue3 + Vite4 + TypeScript + Pinia + VueRouter

  • Vue3:引入了组合式API,让代码逻辑更清晰。
  • Vite4:关于为什么使用Vite,请移步Vite官网。
  • TypeScript:相比JavaScript,TypeScript是强类型语言,有了强类型,就有了更好的IDE支持,包括语法提示和编译时错误信息。
  • Pinia:是Vue的专属状态管理库,它允许你跨组件或页面共享状态。它可以支持TS的语法提示哦。
  • VueRouter:是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。这东西我想不用多说吧!!!

会遇到什么问题?

在项目开发中,会遇到什么问题?如何解决?

  1. 项目如何搭建?
  2. 代码质量如何控制?
  3. 版本怎么控制?
  4. 都需要什么插件?
  5. 动态ICON怎么用?
  6. Mock框架怎么选?
  7. 怎么动态加载路由?
  8. 菜单权限怎么控制?

创建项目

执行npm create vite@latest命令。

# 创建vite项目

npm create vite@latest

√ Project name: ... yize-cloud-web

√ Select a framework: » Vue

√ Select a variant: » TypeScript

Scaffolding project in D:\code\yize-cloud-web...

Done. Now run:

cd yize-cloud-web

npm install

npm run dev