李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

Vue3 文件上传管理后台 ​

一、如何购买课程 ​

手机抖音搜 李钟意讲前端 - 点击名称 - 进入店铺 - 在我的抖音店铺购买

https://www.douyin.com/search/李钟意讲前端

二、如何学习课程 ​

PC 端

  1. 学浪官网下载 APP https://www.xuelangapp.com/download
  2. 使用购买课程的抖音号扫码登录

手机：

  1. 下载学浪 APP
  2. 使用购买课程的抖音号登录学浪即可看到课程

三、获取源码 ​

更新代码将会被推送到码云 - 视频中的源码都可以在下面地址找到

https://gitee.com/fe521/file-upload-app

四、Figma 设计稿 ​

https://www.figma.com/file/K6Kx0px4lLFVp5qhPwxXyG/electron-ffmpeg-video-to-gif

五、接口文档地址 ​

https://documenter.getpostman.com/view/12310217/2s93z5AkZW

六、项目模板 - 从 0 到 1 搭建一个脚手架 ​

Vue3 + Vite + TS + ElementPlus

模板地址 https://github.com/xieerduos/vue-vite-element-plus-starter

在线文档 https://xieerduos.github.io/vue-vite-element-plus-starter

七、启动项目 ​

安装依赖

bash
# npm install --registry=https://registry.npmmirror.com
npm install

开发环境

bash
npm run dev

八、打包项目 ​

联调环境

bash
npm run rd

测试环境

bash
npm run qa

生产环境

bash
npm run prod

九、ESlint 修复代码 ​

执行下面命令，将会自动修复代码

bash
npm run lint

十、生成 changelog ​

生成 /CHANGELOG.md

bash
npm run changelog

生成 /docs/CHANGELOG.md

bash
npm run changelog-docs

十一、构建部署 ​

bash
docker-compose build
docker-compose up -d

http://localhost:8000

十二、推荐的 IDE 设置 ​

推荐使用VSCode，再安装Volar插件（同时记得禁用 Vetur），还要加上TypeScript Vue 插件（Volar）。

十三、TS 中对 .vue 导入的类型支持 ​

默认情况下，TypeScript 无法处理 .vue 导入的类型信息，因此我们用 vue-tsc 替换 tsc CLI 进行类型检查。在编辑器中，我们需要TypeScript Vue 插件（Volar）让 TypeScript 语言服务识别 .vue 类型。

如果你觉得单独的 TypeScript 插件反应不够快，Volar 还实现了一个更高效的接管模式。你可以按照以下步骤启用它：

  1. 禁用内置的 TypeScript 扩展
    1. 从 VSCode 的命令面板运行Extensions: Show Built-in Extensions
    2. 找到TypeScript and JavaScript Language Features，右键并选择Disable (Workspace)
  2. 通过从命令面板运行Developer: Reload Window来重载 VSCode 窗口。