最近参与了好几个项目,都是以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插件的格式化规则,必不可少,虽然这必然是一个痛苦的过程,但是好在只要遵守同一份代码规范,那么这就是一劳永逸的工作。

关于vue项目的文件组织的更多相关文章

  1. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  2. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  3. vue项目目录介绍

    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...

  4. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

  5. 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  6. vue项目构建与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...

  7. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  8. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

  9. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

随机推荐

  1. OpenDayLight Beryllium版本 下发流表实现hardtimeout

    1. 实验拓扑 2. 创建拓扑 from mininet.topo import Topo class MyTopo(Topo): def __init__(self): # initilaize t ...

  2. COM 基础 之 三大基础接口

    摘自 http://blog.csdn.net/liang4/article/details/7530512 1 COM组件实际上是一个C++类,而接口都是纯虚类.组件从接口派生而来. 2 COM组件 ...

  3. Maven版本问题导致的 unable to import maven project, see logs for details. 问题

    新电脑安装了基础环境后,jdk,maven也都安装好了,idea安装后,导入Java项目一切正常,但是idea中code一直导入import依赖包出现问题,错误提示:unable to import ...

  4. pwn学习日记Day13 《程序员的自我修养》读书笔记

    重定位就是把程序的逻辑地址空间变换成内存中的实际物理地址空间的过程.它是实现多道程序在内存中同时运行的基础.重定位有两种,分别是动态重定位与静态重定位. 静态重定位:即在程序装入内存的过程中完成,是指 ...

  5. ILI9341液晶显示

    17.1液晶显示原理 TFT-LCD(Thin Film Transistor Liquid Crystal Display)即薄膜晶体管液晶显示器,是微电子技术与液晶显示器技术巧妙结合的的一种技术. ...

  6. 各个处理器架构ISA编程指南

    1.Intel官方文档: http://www.intel.com/content/www/us/en/processors/architectures-software-developer-manu ...

  7. kvm管理工具Webvirtmgr安装

    虚拟机版本vmware workstation 15.5.0 pro   (也就是linux版) cat /etc/redhat-release CentOS Linux release 7.4.17 ...

  8. mvc 接收json 集合 实例

    开始测试了一下,后台用实体类接收,所报异常如下 无奈之下只能传为字符串,然后字符串转json 页面代码如下 后台controller如下:

  9. Consul 随记

    consul 包含多个组件,但是作为一个整体对外提供服务发现和服务配置工具: 提供的关键特性有: 服务发现:发现的是服务对应的IP地址和PORT端口号 健康检查:检查服务节点状态 Key/Value存 ...

  10. pyenv激活虚拟环境失败

    在使用 pyenv 版本管理工具时激活虚拟环境报错 $ pyenv virtualenvs  #列出当前虚拟环境 $ pyenv activate env-3.6.0 #激活虚拟环境 报错信息: Fa ...