快速搭建基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板,文末有福利

简介: 快速搭建基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板,文末有福利

"一个人光勤奋不行,要想获得事业上的成功,必须把勤奋与思考结合起来,勤奋工作的同时,必须认真地思考问题。古语说:“人无远虑,必有近忧”、“思则明,不思则暗”。在工作中除勤奋之外,还要学会思考,要善于思考,处理事务要有谋略,工作中要有章法有套路。

"

--出自《稻盛和夫给年轻人的忠告》


前言

VueAdminWork自开源以来受到了很多小伙伴的喜欢和支持,同时也有很多不足的地方,比如,有的小伙伴可能觉得现在的版本东西太多了,想要一个简化版的管理框架。

今天我们就来快速搭建一个基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板。这样可以帮大家快速制作自己的后台模板


前提准备,依赖安装

方式一:

1、首先我们用命令创建一个空的项目

yarn create vite my-vue-app --template vue

按照提示一步步创建好就可以了

2、安装基本依赖

这里说一下要安装的基本依赖有哪些:

"dependencies": {
    "@vueuse/core": "^7.1.2",
    "axios": "^0.24.0",
    "js-cookie": "^3.0.1",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path-browserify": "^1.0.1",
    "pinia": "^2.0.9",
    "qs": "^6.10.1",
    "tiny-emitter": "^2.1.0",
    "vue": "^3.2.26",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@arco-design/web-vue": "^2.18.0",
    "@types/js-cookie": "^3.0.1",
    "@types/lodash": "^4.14.178",
    "@types/nprogress": "^0.2.0",
    "@types/qs": "^6.9.7",
    "@vitejs/plugin-vue": "^1.9.3",
    "autoprefixer": "^10.4.0",
    "dotenv": "^12.0.4",
    "eslint": "^7.30.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-define-config": "^1.0.9",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.13.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "postcss": "^8.4.3",
    "prettier": "^2.3.2",
    "tailwindcss": "^2.2.19",
    "typescript": "^4.5.3",
    "unplugin-vue-components": "^0.17.21",
    "vite": "^2.6.4",
    "vite-plugin-components": "^0.13.3",
    "vite-plugin-svg-icons": "^1.0.5",
    "vue-tsc": "^0.3.0"
  }

当然,这里还有一些其它的依赖,如:axios 等,这都是必须的,大家可以根据的习惯进行增减

方式二(推荐)

如果您觉得这样自己写挺麻烦,还需要自己配置依赖,那您可以直接下载完整的项目,把没有用的依赖进行删除(做减法总比做加法要好的多),只留下上述基本的依赖就可以了。

大家可以根据自己的习惯进行选择,如果你想从0学一下,那么建议你用方式一,如果想快速的搞出来,那么推荐用方式二


搭建基本的项目目录

大家直接看一下下面的图片,根据自己的实际情况进行调整:

4edc953e2c684bbe819ffa954c899c08.png


添加VueAdminWork核心文件--layouts

完成了上述步骤,接下来就可以完成最重要的一步,因为我们是基于VueAdminWork框架进行搭建,所以要把VueAdminWork最重要的核心文件引入到我们的模板中,这样基本的框架就可以搭建好了。

找到完整版代码,把 src 里面的文件,除了views都复制到我们的模板中,

接下来,我们就可根据自己的需求来添加页面了。

如果我们只需要 system 下面的页面,就可以把 完整代码中的 src/views/systems复制到模板中。这样我们就完成了大部分的工作,接下来就是测试一下,哪里不合适的再进行微调就可以了。


下载VueAdminWork简化模板

我们上述做了这么多工作,无非就是想要实现一个快速的开发框架,为了满足部分人的需求。VueAdminWork也完成了两个版本的简化模板开发,分别是:ArcoWorkTemplate 和 AdminWorkTemplate 大家可以去官网下载
ArcoWorkTemplate:下载链接:
gitee:
https://gitee.com/qingqingxuan/arco-work-template.git
github:
https://github.com/qingqingxuan/arco-work-template.git
AdminWorkTemplate:下载链接:
gitee:
https://gitee.com/qingqingxuan/admin-work-template.git
github:
https://github.com/qingqingxuan/admin-work-template.git

还请大家拿出发财的小手,点个 star

相关文章
|
3月前
|
自然语言处理 JavaScript 前端开发
一夜获千星!已获 1.7k+,Art Design Pro:Vue3 + Vite + TypeScript 打造的高颜值管理系统模板,这个让后端小哥直呼救命的后台系统
Art Design Pro 是一款基于 Vue 3、Vite 和 TypeScript 的高颜值后台管理系统模板,已获 1.7k+ 星标。项目专注于用户体验与视觉设计,支持主题切换、多语言、权限管理及图表展示等功能,内置常用业务组件,便于快速搭建现代化管理界面。其技术栈先进,开发体验流畅,适配多设备,满足企业级应用需求。项目地址:[GitHub](https://github.com/Daymychen/art-design-pro)。
547 11
|
4月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
208 22
|
7月前
|
JavaScript 安全 前端开发
Gzm Design:开源神器!用 Vue3、Vite4、TypeScript 革新海报设计,免费开源的海报设计器,主流技术打造,轻松高效
海报设计在各个领域都有着广泛的应用,无论是商业广告、活动宣传还是个人创意表达。今天要给大家介绍一款免费开源的海报设计器——Gzm Design,它基于最新的主流技术开发,为用户提供了丰富的功能,让海报设计变得轻松又高效。
455 64
|
7月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
470 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
11月前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
2月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
2月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
2月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
2月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
7月前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
329 82