zoukankan      html  css  js  c++  java
  • 关于vue项目的文件组织

    最近参与了好几个项目,都是以vue-cli脚手架生成的项目,参与完成之后,有点关于项目文件组织的看法,很想聊聊。

    关于目录

    由vue-cli脚手架生成的项目,都会生成一个基本的目录格式。

    类似于这种,项目中我们还会用到vuex,所以多数情况下,我们会在src目录下,创建一个store文件夹,存放关于vuex数据。
    然后就是项目文件了。

    • 项目中,会创建如下多个目录,进行业务组织
      • api: 存放所有接口调用的文件
      • assets: 图片、css等
      • components: 组件,纯组件,基本上不包含业务代码
      • icons:存放项目中用到的icon图标,svg文件
      • plugins:存放第三方插件,诸如UI插件element-ui, 图标插件echarts等等
      • resource: 存放一些额外的资源文件(很多项目未必会有),类似于echarts绘制地图所需的json文件
      • utils:工具存储,axios拦截器,常量文件等等
      • vendor: 基本上很少用到,我仅仅存放了一个table2excel的js导出文件,也可以存入utils
      • view或者pages: 存放真正的业务文件

    如此,基本上够项目使用了,至少到目前为止我是够用的。
    关于业务代码文件view,还需要多说一下,一定不能所有业务组件直接就丢在view里面,会在下面的关于代码风格细说。

    关于代码风格

    vue.js官方其实推出了官方风格指南,不知道是不是vuer是不是都看了,或者看了之后,是否去遵守。即使不遵守他官方风格指南,那是不是理解了他出这一份指南的良苦用心,而形成了自己独特的代码组织风格。
    如果什么都没做,依然属于随心所欲,那么还是去看看,仔细看看。

    • 介绍一下我的代码组织,基本上以业务导航为基本的指导方向,每一个菜单为一个独立文件夹,文件夹首字母大写
      • User: 用户管理模块,基本上包括登录、注册、找回密码
      • 404:提供一个404页面,属于业务友好
      • Home: 首页,基本上每个项目都必然有首页的存在,不管首页内容是啥
      • ...

    剩下的就是每一个菜单一个文件夹,点击该菜单所进入的页面,命名为index.vue,唯一的首字母小写的.vue文件,其他的所有vue文件组织,遵循官方风格指南

    关于代码规范

    既然说到了代码风格,那么必然涉及到代码规范的问题,尤其是在多人协同开发的情况下,如果每个人所用的ide不一样,又没有统一的代码规范,那么利用svn或者git做代码托管之后,更新别人的代码和提交自己的代码,将是一种无比痛苦的事情。

    举一个简单的例子,关于代码缩进,有人用两个空格,有人用4个空格,然后拉去代码之后,在自己的ide打开,遇到安装了prettier插件,那是不是想死?

    所以有必要统一代码规范,尤其是同一个公司的项目。

    那么,不得不说eslint了,项目启动之初,安装eslint,并修正ide的prettier插件的格式化规则,必不可少,虽然这必然是一个痛苦的过程,但是好在只要遵守同一份代码规范,那么这就是一劳永逸的工作。

  • 相关阅读:
    Codeforces Round #636 (Div. 3)
    HTTP请求方法
    HDU2993
    《算法竞赛进阶指南》 #0x61 图论
    Codeforces Round #634 (Div. 3)
    Codeforces Round #633 (Div. 2)
    pandas 数据类型转换及描述统计
    pandas 数据库数据的读取
    pandas电子表格的读取(pandas中的read_excel)
    pandas外部数据的读取构造数据框-文本文件读取(一种utf-8中文编码乱码处理经验)
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/11504396.html
Copyright © 2011-2022 走看看