# money **Repository Path**: jack-code-space/money ## Basic Information - **Project Name**: money - **Description**: 薪酬 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-08-29 - **Last Updated**: 2024-11-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 项目前端 [CREC UI 组件框架](https://pangu.crec.cn/crec-ui) [前端开发规范](http://10.2.38.200:3010/web/#/6/27) [前端脚手架使用指引](http://10.2.38.200:3010/web/#/6/28) [代码分支管理规范](http://10.2.38.200:3010/web/#/6/38) [本地 git 使用规范](http://10.2.38.200:3010/web/#/6/29) -- **以上文档如果打不开**： 可以点击使用这个地址：https://developers.crec.cn/wiki/1084581/1084751 以上地址打开要在host文件中配置 `10.2.38.6 developers.crec.cn`， 才可以打开 windows位置：C:\Windows\System32\drivers\etc mac自行查找 - 前端规范（**重要**）：https://developers.crec.cn/wiki/1084581/1086687 - 常见问题：https://developers.crec.cn/wiki/1084581/1086723 - 前端资料：https://developers.crec.cn/wiki/1084581/1116303 - 组件文档：https://developers.crec.cn/wiki/1084581/1086165 - 基础组件 - PC组件框架： `crec-ui` 是基于阿里的 ant-design-vue 进行二次封装，所以可以先熟悉一下 [ant-design-vue](https://www.antdv.com/components/overview-cn) - 移动端UI框架： `crec-mobile` 是基于有赞的 vant-ui 进行二次封装，所以可以熟悉一下 [vant-ui](https://vant.pro/vant/#/zh-CN) - 业务组件 - pc端： `crec-business-component`， 具体点击[文档](https://developers.crec.cn/wiki/1084581/1090141) - h5端：`crec-business-mobile` ，具体点击[文档](https://developers.crec.cn/wiki/1084581/1090147) ## 须知 初始化项目完成后 需要将.env 项目应用参数替换 并修改配置文件中的配置参数 同时在 根目录/public/config下 初始话完整配置表 ### 修改配置 // .env 文件 ```bash NODE_ENV=production BASE_URL=/ # 请求网络的代理路径，nginx中代理路径即为此路径 VUE_APP_API_BASE_URL=/api # 应用名称，中文 VUE_APP_C_NAME='中铁人资招聘子应用管理端' # 应用名称，英文，与package.json中name一致 VUE_APP_NAME='crec-hr-recruit-manager' # 业务服务名称,需要与后端人员确认接口服务名称后修改，/crec-demo为样板工程服务名称 VUE_APP_API_MAIN_URL = '/crec-demo' VUE_APP_PORT=8081 # 统一认证提供id，如：pgptyb,样板工程clientId VUE_APP_CLIENT_ID='crechr' # 研发平台应用id，如：125，样板工程应用id VUE_APP_APP_ID= '5549' # 统一认证访问地址 VUE_APP_AUTH_URL = https://10.81.106.123 # 应用路径 VUE_APP_PUBLIC_PATH= ``` // config配置 见上述描述，需要根据需要进行修改替换 ### 项目运行 --- - 安装依赖 ```bash yarn install ``` - 开发模式运行 ```bash yarn serve ``` - 编译项目 ```bash yarn build ``` - Lints and fixes files ```bash yarn lint ``` ### 代理配置 本地代理： ```js proxy: { [process.env.VUE_APP_API_BASE_URL]: { target: process.env.VUE_APP_HOST_URL, ws: false, changeOrigin: true, logLevel: 'debug', pathRewrite: { [`(^.*${process.env.VUE_APP_API_BASE_URL})`]: '' } } } ``` 如上，所有接口都有`process.env.VUE_APP_API_BASE_URL`进行统一代理，线上环境也有此代理路径，在线上部署时，配置文件`./deploy/default.config.template`见下方： ```js server { listen 80; server_name _; client_max_body_size 50M; # 配置跨域访问，此处是通配符，严格生产环境的话可以指定为主应用 192.168.2.192:8889 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; gzip_static on; gzip_proxied expired no-cache no-store private auth; gzip on; gzip_min_length 1k; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; gzip_vary on; gzip_disable "MSIE [1-6]\."; # 出现301重定向问题时放开此注释 # absolute_redirect off; location / { index index.html index.htm; root /usr/share/nginx/html; try_files $uri $uri/ /index.html =404; } location /api/ { # 配置网关地址 proxy_pass http://${GATEWAY_ADDRESS}/; } #静态资源文件配置 location ~ .*\.(js|css|ico|jpg|png)$ { index index.html index.htm; root /usr/share/nginx/html; } } ``` 代码中的`${GATEWAY_ADDRESS}`为变量，自动化部署时自动替换相应环境的接口网关地址 ### 其他说明 --- - 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码, `vue.config.js` 下的 `lintOnSave` 值改为 `false` - 组件按需加载 `/src/main.js` L14 相关代码 `import './core/lazy_use'` - `Dockerfile` 与 `./deploy/default.config.template`为线上部署使用，一般情况下不需修改，如需修改 nginx 配置，请修改`./deploy/default.config.template`文件 ## 编码规范 **vscode插件** ``` 1)Auto Close Tag 2)Beautify 3)EditorConfig for VS Code 4)ESLint 5)Prettier ESLint 6)Prettier - Code formatter 7)Vetur 8)HTML Snippets 9)Git History ``` 1. **路由配置** - 配置在config.js里面的`router.config.js`中，参照其他配置结构（本项目不采用服务端动态路由，本地要配置业务路由） - 路由path尽量简短且语义化，同时一定要和views下面的文件或文件夹名称对应上 - views下面尽量按照模块划分，不要直接页面， `xx模块/xx页面/index.vue` 或者 `xx模块/xx子模块/xx页面/index.vue` 不要继续太深 - 子应用的路由path地址由项目负责人配置在主应用菜单数据中 - **路由配置以及文件夹创建尽量由专人负责，保证统一。** 2. **静态资源** - 图片存放在`assets/images`下 - 图标svg资源放在 `assets/icons`下 - `assets`下现有图片资源不要动 3. **样式资源** - 全局样式书写在 `styles/global.less` - `styles/tool.css` 提供了一个基础样式库，可参考，不够可在内部添加，按照对应格式即可 - `App.vue`内不要写样式 - 组件样式书写`style`**必须要加`scoped`，否则会可能影响其他子应用的样式冲突** - 项目中**仅支持less语法**，不支持sass和stylus。 - 非特殊情况不允许在标签上面写style内联样式 - css书写尽量遵循编写规范，[参见文档](https://developers.crec.cn/wiki/1085945/1086687#head18) 4. **工具开发** - 工具函数存在在utils目录。 - 模板中使用的工具函数都注册为过滤器，存放在utils/filter.js中，入口已经注册为全局过滤器直接使用 - 自己开发的工具函数写在utils/index.js中 - 常量如果需要则在utils下新建constants.js存储 - 自定义指令需要则在utils下新建directives.js存储 5. **组件开发** - 管理端基础组件优先考虑`crec-ui`， 业务组件参考`crec-business-component`，必须熟悉；以上不满足，优先考虑自己封装，其次考虑第三方组件。 - 公共组件放在src/comonent下，格式 xxx/index.vue 组件名为文件夹名 - 页面新增、修改应为一个弹框组件且抽离出去。 - 逻辑多且复杂功能尽量拆分为组件出去。 6. **结构搭建** - html编写层次尽量清晰命令，标签语义化 - 尽量使用基础组件`crec-ui`提供的组件。 - class命名使用顺序：tool.scss（全局工具类） ==> global.less（自定义全局） ==> xx.vue（自定义当前） - html书写尽量遵循编写规范，[参见文档](https://developers.crec.cn/wiki/1085945/1086687#head10) 7. **api请求** - 所有的请求必须放在api目录，不允许在页面或组件中出现接口请求地址； - api目录下面按模块划分api请求函数，且在每个文件顶部书写该模块的作用；每个api函数必须有注释； - 注意api函数接口地址的url是否要拼接上对应服务的基准地址（特别是别的子应用服务），且注意在vue.config.js中配置跨域代理。 8. **git规范** - 提交规范/使用规范， [参见文档](https://developers.crec.cn/wiki/1085945/1086707) 9. **权限问题** - 页面权限：目前项目是子应用，主应用会自动根据主应用返回的路由和子应用路由进行筛选匹配，无需操心，已完成。 - 按钮权限：在组件标签上面加 `v-action:权限符`， 尽量只在按钮上面添加。权限符需要在主应用里面进行数据维护 ## 浏览器兼容 Modern browsers and IE11. | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |