前端最终规范


项目规范

<h3>项目目录介绍</h3> <p>[========]</p> <p>├── .github # 自动化 ci 配置(可删除) ├── .vscode # vscode 配置 ├── mock # 本地 mock 数据 ├── node_modules # 项目依赖模块 ├── public │ ├── static # 静态资源 │ ├── favicon.ico # favicon │ ├── favicon_backup.ico # 备份favicon │ └── index.html # 入口 HTML ├── src │ ├── api # API 服务模块 │ ├── assets # 本地静态资源 │ ├── config # 项目配置 │ │ ├── default # 默认配置 │ │ └── config.js # 自定义配置 │ ├── extra # 封装的小工具 │ ├── i18n # 多语言 │ ├── icon # 存放自定义svg图标 ,仅在icon属性为isCustomSvg时才会调用svg图标,如无必要建议使用内置图标 │ ├── router # 路由配置 │ ├── store # vuex 状态管理配置 │ ├── utils # js 工具 │ ├── vab # 核心模块 │ │ |── components # 所有vab组件 | | | ├── VabAppMain # 内页 | | | ├── VabAvatar # 头像 | | | ├── VabBreadcrumb # 面包屑 | | | ├── VabFold # 展开合并 | | | ├── VabFullScreen # 全屏 | | | ├── VabLanguage # 国际化 | | | ├── VabLogo # logo | | | ├── VabNav # 顶部navBar | | | ├── VabNotice # 通知 | | | ├── VabRefresh # 刷新 | | | ├── VabSearch # 搜索 | | | ├── VabSideBar # 左侧菜单 | | | ├── VabTabs # 多标签页 | | | ├── VabTheme # 主题 | | | ├── VabTopBar # 横向布局头部 | | | ├── VabLink # 链接跳转封装 | | | ├── VabMenu # 菜单封装 │ │ | └── VabQueryForm # 顶部查询条件布局封装 │ │ ├── layouts # 界面布局(不需要主题可删除) | | | ├── VabLayoutColumn # 分栏布局 | | | ├── VabLayoutCommon # 常规布局 | | | ├── VabLayoutComprehensive # 综合布局 | | | ├── VabLayoutHorizontal # 横向布局 | | | └── VabLayoutVertical # 纵向布局 │ │ ├── pulgin # vab必要插件 │ │ └── styles # vab主题相关 │ ├── views # 页面组件 │ │ ├── callback # 第三方登录回调页面 │ │ ├── index # 首页 │ │ ├── login # 登录 │ │ ├── mall # 物料市场 │ │ ├── setting # 配置 │ │ ├── register # 注册 │ │ └── vab # 组件页 │ ├── App.vue # 应用入口组件 │ └── main.js # 应用入口js ├── .eslintrc.js # eslint 配置项 ├── babel.config.js # babel-loader 配置 ├── package.json # package.json ├── postcss.config.js # postcss 配置 ├── prettier.config.js # prettier 配置 ├── vab.config.js # vab 配置 └── vue.config.js # vue-cli 配置</p> <h3>vue/cli 配置</h3> <p>位置:src/config/default/cli.config.js</p> <pre><code class="language-javascript">/** * @description 导出vue/cli配置 */ module.exports = { //开发以及部署时的URL,hash模式时在不确定二级目录名称的情况下建议使用""代表相对路径或者"/二级目录/",history模式默认使用"/"或者"/二级目录/" publicPath: "", //生产环境构建文件的目录名 outputDir: "dist", //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 assetsDir: "static", //开发环境每次保存时是否输出为eslint编译警告 lintOnSave: true, //进行编译的依赖 transpileDependencies: ["vue-echarts", "resize-detector"], //开发环境端口号 devPort: "9999", //需要自动注入并加载的模块 providePlugin: {}, //npm run build时是否自动生成7z压缩包 build7z: false, };</code></pre> <h3>网络配置</h3> <p>位置:src/config/default/net.config.js</p> <pre><code class="language-javascript">/** * @description 导出网络配置 **/ module.exports = { //默认的接口地址 如果是开发环境和生产环境走vab-mock-server,当然你也可以选择自己配置成需要的接口地址 baseURL: process.env.NODE_ENV === "development" ? "mock-server" : "mock-server", //配后端数据的接收方式application/json;charset=UTF-8 或 application/x-www-form-urlencoded;charset=UTF-8 contentType: "application/json;charset=UTF-8", //最长请求时间 requestTimeout: 10000, //操作正常code,支持String、Array、int多种类型 successCode: [200, 0, "200", "0"], //数据状态的字段名称 statusName: "code", //状态信息的字段名称 messageName: "msg", };</code></pre> <h3>路由配置项</h3> <p>语法与 vue-router 语法一致,具体详见src/router/index.js</p> <pre><code class="language-markdown">{ "hidden": true, //是否显示在菜单中显示隐藏路由(默认值:false) "menuHidden": false, //是否显示在菜单中显示隐藏一级路由(默认值:false,除分栏布局有效) "alwaysShow": true, //当只有一级子路由时是否显示父路由是否显示在菜单中显示路由(默认值:false) "name": "Demo", //首字母大写,一定要与vue文件的name对应起来,用于noKeepAlive缓存控制(该项特别重要) "meta": { "title": "title", //菜单、面包屑、多标签页显示的名称 "roles": ["admin", "..."], //当config/settings.js中rolesControl配置开启时,用于控制角色(简写) "roles": { //当config/settings.js中rolesControl配置开启时,用于控制角色(全写) "role": ["admin", "..."], "ability": ["READ", "WRITE", "DELETE"], //ability: ["READ","WRITE"], "mode": "allOf" //allOf: 数组内所有角色都拥有,返回True oneOf: 数组内拥有任一角色,返回True(等价第1种数据) except: 不拥有数组内任一角色,返回True(取反) }, "remixIcon": "", //旧版remix图标 "icon": "", //新版 "isCustomSvgIcon": false, //旧版,是否是自定义svg图标(默认值:false,如果设置true,那么需要把你的svg拷贝到icon/remixIcon下,然后remixIcon字段配置上你的图标名) "isCustomSvg": false, //新版,是否是自定义svg图标(默认值:false,如果设置true,那么需要把你的svg拷贝到icon/remixIcon下,然后remixIcon字段配置上你的图标名) "noKeepAlive": true, //当前路由是否不缓存(默认值:false) "affix": true, //当前路由是否固定多标签页(旧版) "noCLosable": true, //当前路由是否可关闭多标签页,同上(新版) "badge": "New", //badge小标签(只支持子级) "tabHidden": true, //当前路由是否不显示多标签页 "activeMenu": "", //高亮指定菜单 "dot": false, //小圆点 "dynamicNewTab": false // 动态传参路由是否新开标签页 }, "children": [] }</code></pre> <h3>样式</h3> <h6>scoped</h6> <p>强烈建议使用 scoped ,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。</p> <h4>通过深度选择器自定义子组件样式</h4> <p>该方法同样适用于局部某个组件自定义 element-ui 样式</p> <pre><code class="language-markdown">&lt;style lang="scss" scoped&gt; ::v-deep { .el-menu--collapse { border-right: 0 !important; .el-submenu__icon-arrow { right: 10px; margin-top: -3px; } .el-submenu__title { span { display: none; } } } } &lt;/style&gt; </code></pre> <p>对于常见的布局样式或者公共的一些样式,列如常见的flex 布局之类的,建议在公共样式文件中定义一个class 类, 后期需要的样式直接添加class 减少重复代码。 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/183ec0c79e11b99f56b22b95627fd834" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/3119d52a79d0133abbd60ea33e2a983f" alt="" /></p> <h3>后端接口联调,必看!!!</h3> <h6>方案 1:直接连接方案(记得后端配置跨域)方案 1:直接连接方案(记得后端配置跨域)</h6> <p>修改位置src/config/net.config.js</p> <pre><code class="language-javascript">/** * @description 导出网络配置 **/ module.exports = { // 默认的接口地址,开发环境和生产环境都会走/vab-mock-server // 正式项目可以选择自己配置成需要的接口地址,如"https://api.xxx.com" // 问号后边代表开发环境,冒号后边代表生产环境 baseURL: process.env.NODE_ENV === "development" ? "/vab-mock-server" : "/vab-mock-server", };</code></pre> <h6>方案 2:代理连接方案(不推荐方案)</h6> <p>打开 vue.config.js 放开注释,就可以了(记住了,其他的啥都不用改,不用改动 settings.js 的 baseURL,框架会自动将 vab-mock-server 后缀代理到你的后台地址,此方式仅在开发环境临时解决跨域,建议直接后端配置,一劳永逸)</p> <pre><code class="language-javascript">proxy: { [baseURL]: { target: `http://你的后端接口地址`,//所有配置不要动,只改这一个地方,改完重启项目 ws: true, changeOrigin: true, pathRewrite: { ["^/" + baseURL]: "", }, }, },</code></pre> <h3>开发、打包注意事项!!!</h3> <p>node 版本与包管理工具 node 版本请安装官网最新正式版 14,node 版本小于 12 无法运行此项目 包管理工具建议使用 cnpm 或 pnpm,使用 npm 或 yarn 安装可能导致图片压缩依赖无法正常安装 布局与主题冗余会导致项目体积较大,访问速度变慢,故建议您选定一种布局或主题后删除其余不需要的布局和主题代码,加快网站访问速度 打包时建议注释掉的功能 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/6d0453b3856b2a69da907153c997fabd" alt="" /></p> <h3>主要介绍下,常需要注意的一些地方,主要集中在src目录下</h3> <p>文件夹命名统一采用驼峰式命名始终是单词大写开头 (PascalCase),js文件,vue 文件 变量名采用小驼峰 path:’/pascalCase”,避免定义无效变量,常量命名要大写 const MAX_DECRYPT_BLOCK = 128 1:(view,api) 下页面文件夹命名: 为了方便维护,view下新建文件夹名称要与 api 下接口文件夹名称一致,文件夹命名主要以功能模块代表命名, view 下文件夹的单个vue页面,不要写太多代码,禁止在 src/components 目录下放置业务私有组件,业务私有组件应该在业务相关文件夹下建立components目录存放。 2:vue 单页面中设置名称 name 与文件夹名称路由名称一致。 主要是命名规则的介绍 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/441be2ce17845da5ca5325dfc3113764" alt="" /></p> <h6>1.新建页面</h6> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/a0d4984607fa5abad9cdac6298f73446" alt="" /></p> <h6>2:添加路由</h6> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/2aa14e86ab31881caec6766c4e486b1f" alt="" /></p> <h6>3:新建页面的api</h6> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/84ee364bc4c3826081af54bb46814192" alt="" /></p> <h6>4:新建store</h6> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/6d821ccf788f89596b7c4d61a7dbc731" alt="" /></p> <h6>5:配置信息</h6> <p>项目所有的配置信息文件在 src/config 目录下 经常修改的 请求后台baseuRL 配置如下 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/a9a8f4c74ff79beac1b842ba447a8b84" alt="" /> 第一个是开发环境下的,第二个是线上的baseUrl</p> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/ff9dac262a59fcad8d8a71186ce2edb8" alt="" /> 开发时,跳过登录验证。 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/fb31908683ab86e18b2b741ab507a9fa" alt="" /> 项目文件夹下vue.config.js 开发环境时跨域可配置代理(不推荐),建议后台配置跨域,</p> <h3>打包</h3> <p>1:config/net.config.js 设置好baseUrl 2:注释main.js 中的mock 3:image-webpack-loader 报错 cnpm i image-webpack-loader -D 4:项目根目录.env 文件填入您购买时绑定的用户名 5:项目根目录新建.env.local 配置下您购买时根据您用户名发放的 key,注意是新建,不是把.env 复制一份改动!!!!</p> <h3>打包时可能遇到的常见错误</h3> <p>打包报错 Cannot find module 'gifsicle' 方案 1:请使用使用 cnpm 安装,一定 cnpm 安装</p> <h1>项目根目录</h1> <pre><code>cnpm i image-webpack-loader -D</code></pre> <p>方案 2:去src/config/cli.config.js关闭图片压缩</p> <pre><code class="language-markdown"> module.exports = { // npm run build时是否开启图片压缩,由于国内网路原因image-webpack-loader必须使用cnpm安装,如无法使用cnpm,请配置false imageCompression: true, };</code></pre> <p>打包提示未配置秘钥 打包提示秘钥失效请填写秘钥到 env.local 中</p> <h1>常见问题</h1> <h4>vendor 过大问题</h4> <p>建议使用 gzip,使用之后体积会只有原先 1/3 左右,pro 默认已开启</p> <h4>url 去掉</h4> <p>第 1 步:设置src/config/cli.config.js下的配置publicPath不能为空 第 2 步:修改src/config/cli.config.js下的配置routerMode为history 第 3 步:需要后端配合</p> <h3>构建和发布</h3> <h6>项目根目录</h6> <pre><code>cnpm i npm run serve npm run build</code></pre> <h3>注释</h3> <pre><code>公共组件使用说明 各组件中重要函数或者类说明 复杂的业务逻辑处理说明 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述 多重 if 判断语句 注释块必须以/**(至少两个星号)开头**/ 单行注释使用//</code></pre> <h3>其他</h3> <p>1:调试信息 console.log() debugger 使用完及时删除 2:除了三目运算,if,else 等禁止简写 3:判断相等时统一使用 === 而不是 ==; 4:后台返回的数据,接受后做必要的检验,数据是否合理,给出相应异常弹出框提示信息。 5:统一使用es6语法,let const … Array.form() 箭头函数 等等, 6:DOM 元素的 隐藏显示 使用 v-if v-show 而不是 通过 :class=”{}” 生成不同的类名 定义 display:none, 7:对element ui 组件进行二次封装时合理使用 $attrs $listeners 8:this.$nextclick(()=&gt;{}) 正确使用 9:写代码时,尽可能的精简代码,能封装的就尽量抽离出来。 10:减少代码内设置行内样式,尽量定义语义化的class 11:页面中没有使用到的变量,方法等。上传svn前及时删除。</p>

页面列表

ITEM_HTML