1. 组件与样式写在一个目录里面，方便后面移动KenNaNa/elementui-code-learn1. 组件与样式写在一个目录里面，方便后面移动

 

layout

 

  layout.vue

 

  layout.less

 

2. 每一个组件都有自己的使用文档说明

 

组件属性，方法说明

 

3. 每一个方法都有自己的使用说明 安装 jsdoc 选中所写函, 按下 ctrl+shift+p, 选中 gen jsdoc

 

/**

 

 * 描述

 

 * @author ken

 

 * @date 2021-05-19

 

 * @returns {any}

 

 */

 

showLoading() {

 

  this.$loading.show({ tip: "3 秒后自动隐藏" });

 

  setTimeout(() => {

 

    this.$loading.hide();

 

  }, 3000);

 

},

 

4. src/api 用于存放所有接口

 

命名注意见名知道意思

 

user.js

 

order.js

 

5. src/assets 用于存放图片

 

img

 

  logo.svg

 

6. src/components 用于存放所有公共的组件，组件独立于自己的文件内

 

// 只有一个组件的形式

 

GlobalFooter 

 

  src

 

    index.vue

 

  index.js // 用于导出组件

 

// 多个组件的形式

 

RightContent

 

  src

 

    AvatarDropdown.vue

 

    RightContent.vue

 

   index.js // 用于统一导出组件

 

7. src/config 用于存放一些静态的配置，以 .config.js 结尾

 

router.config.js

 

theme.config.js

 

8. src/core 存放一些指令，

 

directive

 

  click.dir.js

 

9. src/layouts 存放各个组件显示的 layout 模板

 

layouts

 

  BasicLayout.vue

 

  StoreLayout.vue

 

  BlankLayout.vue

 

10. src/locales 存放多语言

 

en-us

 

  xxx.js

 

zh-cn

 

  xxx.js

 

11. src/plugin 用于存放一些三方插件，自定义的插件

 

// 第三方插件

 

12. src/router 用于存放路由

 

router

 

  index.js

 

13. src/store 用于存放 vuex

 

store

 

  index.js

 

14. src/styles 用于存放一些全局的通用的样式

 

global.less //全局样式

 

vars.less // 变量定义

 

color.less // 颜色值变量定义

 

15. src/utils 用于存放一些公用的工具方法，像拷贝方法，去重方法

 

copyObj.util.js

 

16. src/views 用于存放页面显示的模板

 

store

 

  StoreList.vue

 

18. 每一个三方插件必须有对应的文档链接，或者基本的使用方法说明

 

比如：本项目用到 store 这个三方插件，请把链接贴出来

 

19. 比如 eslint 一些规范问题，在提交代码之前，请使用以下命令，检测是否有警告，或者错误，或者定义的变量没有使用，一定要处理掉，不要把这些警告，错误提交上 github

 

npm run lint 

 

Vue standard - 代码规范