<!-- 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
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
项目详情请参见:https://handsome-man.blog.csdn.net/article/details/129679316 本项目基于vue前、后端分离开源框架打造一款媒资视频电影系统。 项目代码可完美运行~
资源推荐
资源详情
资源评论
收起资源包目录
电影平台管理系统(前端+后端+APP)【毕业设计、课程设计】 (1852个子文件)
nginx.conf.bak 888B
ry.bat 2KB
start_dev.bat 449B
run-admin.bat 218B
run-web.bat 215B
package.bat 153B
package.bat 141B
build.bat 109B
run-web.bat 99B
clean.bat 92B
CHANGES 280KB
redis.windows.conf 28KB
nginx.conf 2KB
fastcgi.conf 1KB
nginx.conf 888B
redis.conf 20B
bootstrap.min.css 150KB
iconfont.css 79KB
icon.css 70KB
main.css 63KB
movies.css 6KB
emoji.css 5KB
seat.css 5KB
border.css 5KB
login.css 5KB
iconfont.css 5KB
iconfont.css 4KB
movie.css 3KB
personal.css 3KB
animation.css 3KB
global.css 2KB
clear.css 1KB
base.css 868B
element-cover.css 81B
.env.development 707B
.env.development 372B
dockerfile 554B
dockerfile 360B
dockerfile 354B
dockerfile 249B
dockerfile 117B
.editorconfig 514B
.editorconfig 514B
iconfont.eot 5KB
iconfont.eot 4KB
.eslintignore 298B
.eslintignore 42B
nginx.exe 2.97MB
redis-server.exe 1.01MB
redis-cli.exe 352KB
spring.factories 122B
fastcgi_params 1007B
401.gif 160KB
loading.gif 13KB
default-img.gif 11KB
loding.gif 4KB
avatar-boy.gif 4KB
default-tea-img.gif 3KB
default-img_old.gif 2KB
v-loading.gif 1KB
posttime.gif 366B
.gitignore 256B
.gitignore 248B
.gitignore 246B
README.html 76KB
axios使用规范.html 47KB
环境变量使用规范.html 29KB
ie.html 23KB
index.html 5KB
h5.template.html 1KB
index.html 1KB
index.html 825B
favicon.ico 6KB
favicon.ico 6KB
ExcelUtil.java 54KB
Encoder.java 45KB
ExcelUtil.java 27KB
Convert.java 24KB
HTMLFilter.java 19KB
SysUserServiceImpl.java 18KB
FileController.java 17KB
GenTableServiceImpl.java 16KB
StringUtils.java 15KB
UUID.java 15KB
MovieServiceImpl.java 14KB
Word2Html.java 14KB
SysMenuServiceImpl.java 14KB
FileOperation.java 14KB
VelocityUtils.java 14KB
ReflectUtils.java 13KB
ArticleServiceImpl.java 13KB
FiletransferServiceImpl.java 12KB
HttpUtils.java 12KB
MimeTypeUtils.java 11KB
AliyunOSSUploader.java 11KB
VideoUtils.java 10KB
SysRoleServiceImpl.java 10KB
FileUploadUtils.java 10KB
IpUtils.java 10KB
FileUtils.java 10KB
共 1852 条
- 1
- 2
- 3
- 4
- 5
- 6
- 19
资源评论
- Rot_kids2023-09-19超级好的资源,很值得参考学习,对我启发很大,支持!
不脱发的程序猿
- 粉丝: 24w+
- 资源: 5804
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功