基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

点击加入:

后端技术内卷群,一起学习!

Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

Fes.js功能特性

  • 简单,基于Vue.js 3.0,上手简单。贯彻 “约定优于配置” 思想,在设计插件上尽可能用约定替代配置,依然提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。

  • 快速,Fes.js 内置路由、构建、插件管理,提供测试、布局、权限、国际化、状态管理、请求、数据字典、Svg等插件,可以满足大部分日常开发需求。

  • 健壮,仅仅需要关心页面内容,减少犯错的机会!提供单元测试、覆盖测试的能力保障项目质量。

  • 可扩展,借鉴 UMI 实现完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序地运行。

  • 面向未来,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。

  • 社区生态,Fes.js的主要重点是开发人员体验,我们会不断改进框架。如果您有问题或疑问,Fes.js的社区将为您提供帮助。

Fes.js架构

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

快速上手

1、依赖环境

首先得有 Node.js,并确保 node 版本是 10.13 或以上

# 打印 node 版本  
node -v  
v10.13.0

推荐使用 yarn 管理 npm 依赖

# 全局安装 yarn  
npm i yarn -g

2、创建项目

步骤1 创建工作空间

如果工作空间不存在,则先创建:

# 创建目录 workspace  
mkdir workspace  
# 进入目录 workspace  
cd workspace

如果工作空间已存在,则直接进入

# 进入目录 workspace  
cd workspace

步骤2 在工作空间创建项目

使用yarn创建

yarn create @fesjs/fes-app myapp

或者使用NPM

npx @fesjs/create-fes-app myapp

如果项目文件夹 workspace/myapp 已经存在,会提示目录已存在:

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

你可以选择:

  • Overwrite 删除项目文件夹,重新创建项目。

  • Merge 保留原项目文件夹,存在相同文件则用模板文件覆盖当前目录文件。

当选择 Overwrite 或者 Merge 或者项目目录 workspace/myapp 不存在,会提示选取一个 template:

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

你可以选默认适用于中后台前端应用的 PC 类型,也可以选择适用于移动端的 H5 类型。

步骤3 安装依赖

使用yarn安装

# 进入项目目录  
cd myapp  
# 安装依赖  
yarn 

或者使用NPM

# 进入项目目录  
cd myapp  
# 安装依赖  
npm i 

3、启动项目

使用yarn启动

# 开发调试  
yarn dev  
  
yarn run v1.22.4  
$ fes dev  
Starting the development server http://localhost:8080 ...  
  
✔ Webpack  
  Compiled successfully in 15.91s  
  
 DONE  Compiled successfully in 15917ms                               11:17:08 AM

或者使用NPM

# 开发调试  
npm run dev  
  
> fes dev  
Starting the development server http://localhost:8080 ...  
  
✔ Webpack  
  Compiled successfully in 3.66s  
  
 DONE  Compiled successfully in 3662ms                                11:17:46 AM

Fes.js 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

4、部署发布

使用yarn构建

# 构建  
yarn build  
  
yarn run v1.22.4  
$ fes build  
  
✔ Webpack  
  Compiled successfully in 45.37s  
  
✨  Done in 48.87s.

或者使用NPM

# 构建  
npm run build  
  
> fes build  
  
✔ Webpack  
  Compiled successfully in 45.37s

构建产物默认生成到 ./dist 下,然后通过 tree 命令查看

tree ./dist  
  
dist  
├── chunk-vendors.27cd4686.js  
├── chunk-vendors.a5f5de67.css  
├── index.11411d43.css  
├── index.d72f1ba2.js  
├── index.html  
├── logo.png  
└── static  
    └── logo.0f85bba0.png  

5、本地验证

发布之前,可以通过 serve 做本地验证,验证结果应该跟执行 fes dev 的结果一样。

6、部署

本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。

Fes.js插件

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

开源地址:https://gitee.com/WeBank/fes.js

精彩推荐
最全的java面试题库
开源版的高仿 “ 微信 ”,吊炸天!

与其在网上拼命找题? 不如马上关注我们~

基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)


↓点阅读原文,Java面试题库尽情看!

原文始发于微信公众号(Java面试题精选):基于 Vue3.0 的中后台前端解决方案(已开源,拿来即用)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/55916.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!