Vue 学习笔记（三十七）：一般工程目录结构解析

一般webpack下的vuejs项目结构解析，实际工程实践中的项目多都是这样的结构：

▸ build/                // 编译用到的脚本
▸ config/               // 各种配置
▸ dist/                 // 打包后的文件夹，gitignore
▸ node_modules/         // node第三方包，gitignore
▸ src/                  // 源代码
▸ static/               // 静态文件, 暂时无用
  index.html            // 最外层文件
  package.json          // node项目配置文件

• build 是webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
• config 主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
  • dev.env.js 开发模式下的配置文件，一般不用修改
  • prod.env.js 生产模式下的配置文件，一般不用修改
  • index.js 很重要的文件， 定义了 开发时的端口（默认是8080），定义了图片文件夹（默认static)， 定义了开发模式下的 代理服务器. 我们修改的还是比较多的。index.js 的 build 对象：
    • index：配置打包后入口.html文件的名称以及文件夹名称
    • assetsRoot：配置打包后生成的文件名称和路径
    • assetsPublicPath：配置 打包后 .html 引用静态资源的路径，一般要设置成 “./“
    • productionGzip：是否开发 gzip 压缩，以提升加载速度
• dist
  打包生成物，注意加入 gitignore，用于生产部署

• src 项目源码及需要引用的资源文件，日常开发核心文件夹

  • assets 存放项目中需要用到的资源文件，css、js、images等。
  • components 用到的”视图”和”组件”所在的文件夹。可以看到 .vue文件，header.vue、footer.vue等
  • emit 自己配置的vue集中式事件管理机制
  • router/index.js 路由文件。 定义了各个页面对应的url
  • service 自己配置的vue请求后台接口方法
  • page 存在vue页面组件的文件夹
  • util vue开发过程中一些公共的.js方法
  • vuex 存放 vuex 为vue专门开发的状态管理器
  • App.vue 如果index.html 是一级页面模板的话，这个App.vue就是二级页面模板。 所有的其他vuejs页面，都作为该模板的 一部分被渲染出来。（使用标签<route-view></router-view>渲染整个工程的.vue组件）
  • main.js vue-cli工程的入口文件。（？废代码。没有实际意义，但是为了支撑整个vuejs框架，存在很必要。）

• index.html 设置项目的一些 meta 头信息和提供<div id="app"></div>用于挂载 vue 节点

• package.json 用于 node_modules 依赖配置和启动、打包项目的 npm 命令管理