《vue3+ts+element-plus 后台管理系统系列一》之简介,驱动核心源码详解和Binder超系统学习资源

34 阅读2分钟
  • 编辑器

  • 富文本

  • Excel

  • 导出excel

  • 导入excel

  • 前端可视化excel

  • 导出zip

  • 表格

  • 动态表格

  • 拖拽表格

  • 内联编辑

  • 错误页面

  • 401

  • 404

  • 組件

  • 头像上传

  • 返回顶部

  • 拖拽Dialog

  • 拖拽Select

  • 拖拽看板

  • 列表拖拽

  • Dropzone

  • Sticky

  • CountTo (to do)

  • 综合实例

  • 错误日志

  • Dashboard

  • 引导页

  • ECharts 图表

  • Clipboard(剪贴复制)

目录结构

admin-tmpl

├─ .env.dev.build # 开发环境

├─ .env.dev.serve # 开发本地本地

├─ .env.prod.build # 生产环境

├─ .env.prod.serve # 生产环境本地

├─ .env.test.build # 测试环境

├─ .env.test.serve # 测试环境本地

├─ .eslintrc.js # eslint

├─ README.md

├─ dist # 打包dist

├─ mock # mock服务

├─ public # 静态资源

├─ src # 源码

│ ├─ @types # ts 声明

│ ├─ apis # 接口请求

│ ├─ assets # webpack打包的资源

│ ├─ components # 公共组件

│ ├─ config # 全部配置

│ ├─ constant # 常量

│ ├─ directives # 全局指令

│ ├─ layout # 全局Layout

│ ├─ locales # 国际化

│ ├─ model # 全部model存放

│ ├─ plugins # 插件

│ ├─ router # 路由

│ ├─ store # 全局store管理

│ ├─ styles # 全局样式

│ ├─ utils # 全局公共方法

│ └─ views # 所有业务页面

├─ tsconfig.json # ts 编译配置

└─ vue.config.js # vue-cli 配置

HighLight


项目均已最新技术实现,Vue3配套升级全家桶和涉及的插件组件等

项目采用技术:

  • vue3 + composition api

  • typescript3.9

  • sass (dart sass)

  • echats5

vue next 系列:

Document


Setup


项目主要是前端和mock server(node)

前后端都启动

yarn

yarn start

or

npm install

npm run start

单独启动 Mock

后台模拟服务器和其他版本不同,采用koa2+Faker进行模拟。

启动mock server:

yarn mock

or

npm run mock

mock 需要部署到服务器,单独项目地址:github.com/rcyj-FED/ad…

mock在线测试地址:admin-tmpl-mock.rencaiyoujia.com/

单独启动 vue admin

yarn serve:dev

or

npm run serve:dev

多环境命令查看package.json script:

"serve:dev": "cross-env NODE_ENV=development dotenv -e .env.dev.serve vue-cli-service serve",

"build:dev": "cross-env NODE_ENV=production dotenv -e .env.dev.build vue-cli-service build",

"serve:test": "cross-env NODE_ENV=development dotenv -e .env.test.serve vue-cli-service serve",

"build:test": "cross-env NODE_ENV=production dotenv -e .env.test.build vue-cli-service build",

"serve:prod": "cross-env NODE_ENV=development dotenv -e .env.prod.serve vue-cli-service serve",

"build:prod": "cross-env NODE_ENV=production dotenv -e .env.prod.build vue-cli-service build",

eslint

yarn lint

or

npm run lint

最后

你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料

前端路线图

vue.js的36个技巧 开源分享:docs.qq.com/doc/DSmRnRG…