SmartAdmin

Appearance

调头熟悉Vue3 JS项目 ​

一、整体结构 ​

1.1、选择JS ​

这里使用 JS 去讲解，为什么选择JS ，或者说你该选择JS还是TS，请看：Js和Ts的选型那些事儿

1.2、目录说明 ​

vim
src                               源码目录
|-- api                              所有api接口，按照`business、system、support`拆分子目录
|-- assets                           静态资源，images, icons, styles等
|-- components                       公用组件，按照`business、system、support`拆分子目录
|-- config                           配置信息（项目配置）
|-- constants                        常量信息，项目所有Enum, 全局常量等，按照`business、system、support`拆分子目录
|-- directives                       自定义指令
|-- i18n                             国际化
|-- lib                              外部引用的插件存放及修改文件
|-- plugins                          插件，全局使用
|-- router                           路由，统一管理
|-- store                            pinia状态, 按照`business、system、support`拆分子目录
|-- theme                            自定义样式主题
|-- utils                            工具类
|-- views                            视图目录，按照`business、system、support`拆分子目录
|   |-- business                     业务目录
|   |-- support                      支撑目录
|   |-- system                       系统目录

二、修改配置 ​

2.1、修改项目配置 ​

项目的默认配置在 src/config/app-config.js 文件中

2.2、修改接口配置 ​

项目支持 五个不同环境的配置，只需改环境文件中的VITE_APP_API_URL和VITE_APP_TITLE即可.
具体 五个环境文件

  • .env.localhost 本地环境， 执行 npm run localhost
  • .env.development 开发环境， 执行 npm run dev
  • .env.test 测试环境打包， 执行 npm run build:test
  • .env.pre 预发布环境打包， 执行 npm run build:pre
  • .env.prod 生产（线上）环境打包， 执行 npm run build:prod