Vue2项目架构搭建（三）——修改项目目录

        vue-cli创建的项目目录比较简单，而且还有些测试的界面需要删除，因此在路由设置和组件引入之前先调整一下项目的目录。

vue-cli创建的目录

├── README.md                       // 项目说明文档
├── node_modules                      // 项目依赖包
├── build                          // 编译配置文件，主要用于打包，一般不用管
├── config                         // 项目基本配置文件夹
│   ├── dev.env.js                  // 开发配置文件
│   ├── index.js                   // 配置主文件
│   └── prod.env.js                  // 编译配置文件
├── index.html                       // 入口文件
├── package-lock.json                   // 优化性能，npm自动生成
├── package.json                      // 项目依赖包配置文件，npm自动生成
├── src                           // 主要开发文件夹
│   ├── App.vue                    // APP入口文件
│   ├── assets                     // 初始项目资源目录
│   ├── components                  // 组件目录
│   ├── main.js                    // 主配置文件
│   └── router                     // 路由配置文件夹
└── static                         // 资源放置目录

src配置后的目录

        assets文件夹直接删掉，HelloWorld.vue组件也直接删掉，根据自己需求创建目录，整顿后目录如下：

├── App.vue                         // APP入口文件
├── components                      // 组件文件夹，目前为空
├── config                          // 项目配置文件夹
│   └── index.js                   // 项目配置文件
├── main.js                         // 项目配置文件
├── router                          // 路由配置文件夹
│   └── index.js                   // 路由配置文件
├── style                           // scss 样式存放目录  
└── utils                           // 常用工具文件夹
    └── index.js                    // 常用工具文件

      整顿后项目就会报错

         第一个error是因为删掉了一个assets文件夹，App.vue界面引入了logo.png图片找不到，修改一下图片的路径或者直接删掉就好。

        第二个错误是因为删除了HelloWorld.vue文件，在路由配置中找不到改文件而报错，在router文件下的index.js文件中删除导入改文件和路由配置即可。

static目录

        静态资源文件目录跟普通的web项目一样即可，主要是分配一些不想打包的文件，列如bootstrap的样式，打包进去可能会导致优先级变化，因此直接引用就好。

├── static                          
   ├── css                   
   ├── fonts                     
   ├── js                                
   └── images                     

本人才疏学浅，如果哪位小伙伴发现问题或者有更好的优化，希望能留言我好及时修改和优化，大家一起学习一起进步，免得被不合理或者错误的东西误导后续看到此博文的小伙伴。