# base_front **Repository Path**: big-suo/base_front ## Basic Information - **Project Name**: base_front - **Description**: 为后端开发学习前端项目提供模块化、标准化的基础纯净开发框架，方便定制化开发 - **Primary Language**: NodeJS - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 15 - **Forks**: 1 - **Created**: 2022-04-26 - **Last Updated**: 2023-08-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vuex, i18n, 脚手架, vue3, Ant-Design ## README # base_front **为 `后端开发` 学习前端项目提供模块化、标准化的基础纯净开发框架，方便定制化开发。** > - 为方便学习高版本依赖应用，本项目会融合vue2.X和vue3.X的多种写法 > - 所有的依赖都是基于vue的主体版本选择比较新的比较稳定的搭配方案，力求控制台不见一点红。 > - 开源组件采用 `ant-design-vue` , 相较于 `Element-ui` 虽比较复杂，但是组件多啊，方便实现 更多定制化需求。 无法持续更新，本人作为后端开发，在学到新东西就更新下，主要用于大家小项目的学习以及开发 欢迎前端大佬提供学习优化建议！！！ **提供:** - 模块化国际化配置 - 模块化路由配置 - 模块化VueX配置 - 模块化Api配置 - 便捷开发组件及使用文档（README.md） - 必要工具类（有新的就会加上……持续更新） | 位置 | 说明 | | ---------------------------- | ------------------------------------- | | [src/utils/security/aes.js](./src/utils/security/aes.js) | aes加密 | | [src/utils/security/sm2.js](./src/utils/security/sm2.js) | sm2加密 | | [src/utils/security/sm3.js](./src/utils/security/sm3.js) | sm3加密 | | [src/utils/security/md5.js](./src/utils/security/md5.js) | md5加密 | | [src/utils/security/base64.js](./src/utils/security/base64.js) | base64加密 | | [src/utils/date.js](./src/utils/date.js) | 日期工具类 | | [src/utils/request.js](./src/utils/request.js) | http工具类 | | [src/utils/browser.js](./src/utils/browser.js) | 浏览器工具 | | [src/utils/common.js](./src/utils/common.js) | 通用工具 | - 必要的全局 变量（有新的就会加上……持续更新） | 调用名 | 说明 | | ---------------------------- | ------------------------------------- | | $axios | 原生的axios | | $config | 全文配置 | --- ## 项目启动 想要开发环境启动很简单，项目拉下来，npm install完npm run serve，前置条件是有node环境（本人开发环境都是node12及以上的版本）， 为确保依赖的一致性请不要随意修改 `package-lock.json` ， 如果 npm install 依赖下载不下来，可以删除 `package-lock.json` 后重试 ``` npm install 下载依赖 npm run serve 启动项目 npm run build 打包项目 npm run test npm run lint ``` ## 项目一级目录及文件说明 | 文件夹或文件名 | 说明 | | ---------------------------- | -------------------------------------- | | READEME_IMAGE | READEME.md中的一些图片文件，可删除 | | public | 不打包成模块的公共文件 | | src | 核心代码及配置文件 | | .browserslistrc | 浏览器适配文件 | | .env | 项目环境变量配置文件 | | .eslintignore | eslint代码规范校验的忽略配置文件 | | .eslintrc.js | eslint代码规范校验的配置规则文件 | | .gitignore | git提交忽略文件 | | babel.config.js | Babel JS编译器的配置文件 | | jsconfig.json | JS项目根目录的指向性文件 | | LICENSE | 开源文件 | | package.json | 版本依赖控制文件 | | package-lock.json | 版本依赖锁定文件 | | vue.config.js | 核心配置文件（打包，代理，解析器。。。） | ## 项目的使用和配置 ### 1、名称配置 修改 [.env文件](./.env) 配置文件下的 `VUE_APP_TITLE` 的值 ``` VUE_APP_TITLE=项目名称 ``` ### 2、项目端口配置 修改 [vue.config.js文件](./vue.config.js) 中`devServer.port`的值，默认端口8001 ``` devServer: { port: 8001 } ``` ### 3、项目基础路径配置 修改 [.env文件](./.env) 配置文件下的 `BASE_URL` 的值，配置完后项目启动的基础路径就是 `http://127.0.0.1:8001/base` ``` BASE_URL=/base ``` ### 4、Api接口代理配置 详细接口请求配置请参考：[链接地址](./src/api/README.md) ### 5、模块路由配置（权限控制） 详细路由配置请参考： [链接地址](./src/router/README.md) 路由的标题也支持国际化配置，若要配置请详细阅读README.md文件 ### 6、全局配置文件 修改 [settings全局配置文件](./src/config/settings.js) 全局获取 `$config` ### 7、I18n国际化配置 请参考： [链接地址](./src/locales/README.md) ### 8、vuex使用与配置 请参考： [链接地址](./src/store/README.md) #### 8.1、 已配置项 | 配置项 | 说明 | | --------------------------------- | ------------------------------------- | | this.$store.state.locale | 当前选择的国际化语言 | | this.$store.state.login.userInfo | 当前登录的用户信息 | ### 9、组件使用 参考 [src/components](./src/components) 下每个文件夹各自的 `README.md` 文件 | 组件名 | 说明 | 地址 | | ------------------- | ----------------------- |----- | | QDistrictsCascader | 行政区划级联选择器 |[链接地址](./src/components/QDistrictsCascader/README.md)| | QDownload | 下载组件 |[链接地址](./src/components/QDownload/README.md)| | QException | 异常页面组件 |[链接地址](./src/components/QException/README.md)| | QLanguageSelect | 国际化下拉选择器组件 |[链接地址](./src/components/QLanguageSelect/README.md)| | QLoading | 加载效果组件 |[链接地址](./src/components/QLoading/README.md)| | QSvg | svg图片渲染组件 |[链接地址](./src/components/QSvg/README.md)| | QTable | 表格组件 |[链接地址](./src/components/QTable/README.md)| ## 项目功能点修改 > 从功能页面找到对应调用方法，一层层找不容易出错。 - 首页入口是 [src/views/login/LoginFront.vue](./src/views/login/LoginFront.vue) 1. 首页主要显示区域 [src/views/login/LoginHome.vue](./src/views/login/LoginHome.vue) 2. ... - 登录页入口 [src/views/login/LoginPage.vue](./src/views/login/LoginPage.vue) ，登录页分为左右两路由组件 1. 左路由组件，拟定为宣传页面 [src/views/login/components/LoginPropaganda.vue](./src/views/login/components/LoginPropaganda.vue) 2. 右页面，登录功能入口 [src/views/login/components/LoginWay.vue](./src/views/login/components/LoginWay.vue) --- ## 全局默认配置文件解释 > 指的是 [.env文件](./.env) 下环境变量的配置 > - `.env`：全局默认配置文件，无论什么环境都会加载合并 > - `.env.development` ：开发环境的配置文件 > - `.env.production` ：生产环境的配置文件 vue 会根据启动命令自动加载相对应的环境配置文件，开发环境加载 .env 和 .env.development 。 生产环境加载 .env 和 .env.production 。 **优先级：** 环境配置文件 > 全局配置文件 当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项 注意：三个文件的文件名必须按上面方式命名，不能乱起名，否则读取不到文件。 ### 配置格式 注意：属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX ### 已有配置说明 | 变量名 | 说明 | | --------------------------------- | ------------------------------------- | | NODE_ENV | 环境 | | VUE_APP_VERSION | 平台版本号（随意修改） | | VUE_APP_TITLE | 平台名称（随意修改） | | BASE_URL | 基础路径（常为项目名），不以 "/"结尾 | --- ## 已提供的根节点公共方法 ```javascript export default { methods: { tos() { this.toIndex() } }, inject: ['toIndex'] }; ``` 用 `inject: ['toIndex']` 直接引入 | 方法名 | 参数 | 说明 | | -----------|------------ | ---------- | | reload | | 刷新路由 | | toIndex | | 回到首页 |