-
编辑器
-
富文本
-
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 配置
项目均已最新技术实现,Vue3配套升级全家桶和涉及的插件组件等
项目采用技术:
-
vue3 + composition api
-
typescript3.9
-
sass (dart sass)
vue next 系列:
项目主要是前端和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
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料