（项目）Vue.cli3开发目录架构

本章不包含任何webpack、npm、脚手架等等安装步骤，这些都比较基础，但是要找好对应的版本，这个按项目需求自行解决。其实脚手架4的话下面我要讲的目录其实都会自动创建，主要针对公司要求使用脚手架3开发的同学和农民工们。

首先我们前端开发是在src目录下，我这里安装的是vue的脚手架3的版本

目录下第一个文件夹assets（资源），里面放静态资源图片、CSS样式文件。

所以不用怀疑，在assets文件夹下新建img和css文件夹，不要大写

第二个文件夹components（组件），但是如果是大型项目肯定包含N多个子组件，所以一个组件文件夹肯定最终会显得臃肿，所以采取的方案是在src目录下新建一个views（视图）目录，比如下面的首页、分类、购物车、我的，这四个视图，后面在里面写子组件时就可以对应的再创建子目录，更加细分

继续说components目录，那它里面放的是什么呢？它里面放的都是公共的组件，就以京东搜索框为例，搜索框肯定需要在首页用，也要在分类用，那就没有必要在这两个父组件下都创建搜索框组件了，在components目录下就可以解决，最后在首页和分类组件中引用即可，大大提高效率。

接下来以我的个人习惯，会在components目录里新建两个文件夹common（公共的）和content（内容）

common目录里要做的事情意义重大，我觉得完全体现了Vue组件封装的复用性，比如京东搜索框这个组件，我不单单会在当前项目中的两个父组件中使用，下一个项目比如淘宝项目，我完全不需要再写一个搜索框组件，直接将common中的京东搜索框copy过去，然后改改样式逻辑与淘宝项目关联引用即可，甚至可以直接将整个common目录copy过去，毕竟京东和淘宝有很多相同点。这就是组件化的复用性。

而content目录里面放的仅仅是与当前业务相关的项目组件，毕竟淘宝和京东网页布局和逻辑肯定有不一样的，所以说白了content目录只针对当前的项目。

接下来在src目录下再新建几个文件夹

router（可选）：路由相关，不过创建项目的时候脚手架会自动创建该目录以及里面配置好的index.js文件，但我建议前期先自己手写配置文件，熟练了以后再用它配置好的文件，最后简单做些改动即可，先放张图，简单对比下，我需要将Router当作实例对象使用的，特别是导航守卫用的钩子函数！

store目录：这个不用多说，Vuex必备

network目录：这个也不用多说了，axios网络请求模块封装相关的文件都放这里面

common目录：注意和components下的common目录区分，主要放的是一些JS文件，是我在项目中抽取出来的多个地方都会用到的公共常量，统一抽取放在这个文件里面，既然是常量那文件名就是const.js，另外还有些公共的回调函数方法，也就是工具类，我也会抽取到这个目录下使用，文件名是utils.js。

最后，其实真实开发中，有可能还需要新建别的目录及文件去对项目进行抽取和封装，以上的话可以说是脚手架3中必备的目录。