用ruoyi-vue前后端分离开源框架打造一款媒资视频电影系统 涉及了博客 电影 问答模块 打造一个多元化系统

<!-- prettier-ignore-start --> <!-- SOMETHING AUTO-GENERATED BY TOOLS - START --> <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} --> <!-- code_chunk_output --> - [项目运行指南](#项目运行指南) - [开发本地环境](#开发本地环境) - [stage 测试环境](#stage-测试环境) - [开发相关插件/工具](#开发相关插件工具) - [开发规范](#开发规范) - [环境变量使用规范（doc）](#环境变量使用规范doc) - [axios 使用规范（doc）](#axios-使用规范doc) - [vue](#vue) - [【数据流向】](#数据流向) - [【慎用全局注册】](#慎用全局注册) - [【组件名称】](#组件名称) - [【组件中的 CSS】](#组件中的-css) - [【统一标签顺序】](#统一标签顺序) - [【其它注意事项】](#其它注意事项) - [【 !!!其它则遵守 vue 官方风格指南】](#a-target_blank-hrefhttpscnvuejsorgv2style-guide其它则遵守-vue-官方风格指南a) - [vue-router](#vue-router) - [vuex](#vuex) - [模块复用](#模块复用) - [其它杂项](#其它杂项) - [代码注释](#代码注释) - [工程目录结构](#工程目录结构) - [前端部署](#前端部署) - [给 UI 的建议](#给-ui-的建议) - [填坑 Q 群：901842001](#填坑-q-群901842001) <!-- /code_chunk_output --> <!-- SOMETHING AUTO-GENERATED BY TOOLS - END --> <!-- prettier-ignore-end --> # 项目运行指南 - 安装依赖包：`npm install` - 说明：正式开发前最好提交 package-lock.json，正式开发后慎用 `npm update` - 运行： - 启动为 dev 环境：`npm run serve` 或 `npm start` - 打包为 stage 环境：`npm run build:stage` - 打包为 prod 环境：`npm run build:prod` - 检查并修复源码：`npm run lint` - 运行单元测试：`npm run test:unit` - 启动静态资源服务：`npm run dist` - 版本号操作：`npm version major|minor|patch` - 版本号格式说明：major(主版本号).minor(次版本号).patch(修订号) # 开发本地环境 - 新建 .env.development.local 来重写部分环境变量，如： - 模拟数据：`VUE_APP_MOCK = true` - 接口服务：`DEV_PROXY_TARGET_API = http://10.25.73.159:8081` - ... # stage 测试环境 - stage 环境客户端侧允许自定义接口前缀，方便调试（特别是后端开发），可通过浏览器控制台输入，如： ```js /* 需要接口支持 cors 跨域，或设置浏览器允许跨域 */ localStorage.vue_web_baseurl_api = 'http://127.0.0.1:8081' localStorage.vue_web_baseurl_api = 'http://127.0.0.1:8081/api' // ... ``` # 开发相关插件/工具 - VSCode 相关插件 - 必要插件 - `ESLint` - `Vetur` - `Prettier - Code formatter` - `path Autocomplete` - 推荐插件 - `stylelint` - `vscode-element-helper` (element-ui 专用) - `SVG Gallery` - `Debugger for Chrome` - `GitLens -- Git supercharged` - Chrome 相关插件 - 必要插件 - `vue-devtools` - 推荐插件 - `JSON Viewer` (直接在地址栏中发 get 请求时，方便查看 json 数据) # 开发规范 ## 环境变量使用规范（doc） - 详见：`@/../docs/环境变量使用规范` ## axios 使用规范（doc） - 详见：`@/../docs/axios使用规范` ## vue ### 【数据流向】 - 单个组件的数据流 ``` props、data/$store/$route、computed (由前面派生) ↓ template/render ↓ 用户交互事件、初始化的异步回调 ↓ data/$store/$route ``` - 组件间的数据流 - 父向子传递用 props - 子向父传递用 vue 内置的自定义事件，即 `$emit` - 父子双向传递用 <a target="_blank" href="https://cn.vuejs.org/v2/guide/components-custom-events.html">v-model</a> 或 <a target="_blank" href="https://cn.vuejs.org/v2/guide/components-custom-events.html">.sync</a> - 跨越传递用 vuex - 跨越传递用 eventBus（慎用） - 规划好作用范围 - 通过实例控制范围（不同范围不同实例） - 通过命名空间控制范围（不同范围共享同一实例） - 事件名使用 kebab-case 命名法 - 备注好使用说明（最好能维护到相关 md 文档，形成事件清单，方便索引/查阅/理解） - 紧密耦合的隔代传递也可以用 provide/inject（注意响应式问题） - 当需要进行反向传递时，可以通过回调方式（参考 React） ### 【慎用全局注册】 - 组件、混入 ... 应使用局部注册 局部注册可保持清晰的依赖关系，并且 IDE 智能感知更为友好 ### 【组件名称】 - 名称大小写 ```html <script> import MyComponent from '@/components/MyComponent.vue' // 文件名使用 PascalCase 命名法 export default { components: { MyComponent }, } </script> <template> <div> <!-- 局部注册的使用 PascalCase 方式调用（区别于全局注册的，同时又方便选中定位） --> <MyComponent /> <!-- 全局注册的使用 kebab-case 方式调用 --> <el-input /> </div> </template> ``` - 使用前缀 - <a href="#hash_Ex">扩展/包装第三方开源组件或内部公共库组件</a> 使用 Ex 前缀 - 单例组件使用 The 前缀 ### 【组件中的 CSS】 - 使用 <a target="_blank" href="https://vue-loader.vuejs.org/zh/guide/css-modules.html">CSS Modules</a>，基于如下考虑： - 不让外部进行样式重写，避免强耦合 (可通过 props 来处理内部样式的变化) - 放心使用简短且语义强的 class 名，无需多余的命名空间 - 样式彻底模块化（即我的规则影响不了别人，别人的规则也影响不了我） - 使用方式 - 语法 ```less // 默认为 local 区域 .xxx_xxx { } // 转到 global 区域 :global { .yyy-yyy { } } :global { // 转到 local 区域 :local { .xxx_xxx { } } } // 仅转换选择器 .xxx_xxx :global(.yyy-yyy):hover { } .xxx_xxx:global(.yyy-yyy):hover { } :global { .yyy-yyy :local(.xxx_xxx):hover { } .yyy-yyy:local(.xxx_xxx):hover { } } ``` - 单个组件专属 ```html <style lang="less" module></style> ``` - 多个组件共用 (\*.module.less) ```js import style from './style.module.less' ``` - 注意事项 - 选择器少嵌套，尽量的扁平化 - local 的命名推荐如下风格，这样区别于 global，也以区别于驼峰式的 js 变量/属性 ```less .xxx_xxx { // 单词全小写，多个单词间用下划线连接 } ``` ### 【统一标签顺序】 - script --> template --> style，并使用空行分隔 ### 【其它注意事项】 - 慎用 `$refs`、`$parent`、`$root`、`provide/inject` - `$refs` 一般用于第三方开源组件或内部公共库组件或非常稳定的组件，以调用显式声明的方法 - 组件中的 data 及 vuex 中的 state 应该可序列化，即不要存 undefined、function 等 ### 【 <a target="_blank" href="https://cn.vuejs.org/v2/style-guide/">!!!其它则遵守 vue 官方风格指南</a>】 --- ## vue-router - url 定义准则 - path 对应视图变化，query 对应数据变化，hash 对应滚动条位置 - path 使用 kebab-case 命名法，并且尽量与组件名相匹配（即一眼看到 path 就能迅速找到对应的组件） ``` 路由 path：/project-list ↓ 路由组件：@/views/ProjectList.vue | @/views/ProjectList/index.vue ``` - 命名路由的 name 值使用 kebab-case 命名法，并且在嵌套时带命名空间（避免冲突） ```js export const routes = { path: '/user-center', name: 'user-center', // ... children: [ { path: 'base-info', name: 'uc-base-info', // 带命名空间 uc- // ... }, ], } ``` - 当组件依赖 `$route` 作为核心数据时，要使用<a ta