3.6 Webpack下的Vue.js项目文件结构

前面我们已经安装了Webpack、vue-cli并运行成功，看到了Vue.js的第一个页面。那么我们首先需要对Webpack下的Vue.js有一个全面的了解。

运行下面命令后：

$ vue init webpack my-project

会生成一个崭新的项目。它的文件结构如下：

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

下面我们针对重要的文件和文件夹依次说明。

3.6.1 build文件夹

build文件夹中保留了各种打包脚本，是不可或缺的，不可随意修改。

build文件夹展开后如下：

▾ build/
   build.js
   check-versions.js
   dev-client.js
   dev-server.js
   utils.js
   vue-loader.conf.js
   webpack.base.conf.js
   webpack.dev.conf.js
   webpack.prod.conf.js

•build.js：打包使用，不能修改。

•check-versions.js：检查npm的版本，不能修改。

•dev-client.js和dev-server.js：是在开发时使用的服务器脚本，不能修改（借助于node后端语言，在做Vue.js开发时，可以通过$npm run dev命令打开一个小的server运行Vue.js）。

•utils.js：不能修改，做一些css/sass等文件的生成。

•vue-loader.conf.js：非常重要的配置文件，不能修改。内容是用于辅助加载Vue.js用到的css source map等。

•Webpack.base.conf.js、Webpack.dev.conf.js、Webpack.prod.conf.js：这三个都是基本的配置文件，不能修改。

3.6.2 config文件夹

与部署和配置相关。

▾ config/
    dev.env.js
    index.js
    prod.env.js

•dev.env.js：开发模式下的配置文件，一般不用修改。

•prod.env.js：生产模式下的配置文件，一般不用修改。

•index.js：很重要的文件，定义了开发时的端口（默认8080）、图片文件夹（默认static）、开发模式下的代理服务器。

对于这个文件夹的内容，会在后续的章节中陆续进行解释（如对于某个页面的渲染过程、如何做代理转发）。

3.6.3 dist文件夹

打包之后的文件所在目录如下：

▾ dist/
    static/
      css/
        app.d41d8cd98f00b204e9800998ecf8427e.css
        app.d41d8cd98f00b204e9800998ecf8427e.css.map
      js/
        app.c482246388114c3b9cf0.js
        app.c482246388114c3b9cf0.js.map
        manifest.577e472792d533aaaf04.js
        manifest.577e472792d533aaaf04.js.map
        vendor.5f34d51c868c93d3fb31.js
        vendor.5f34d51c868c93d3fb31.js.map
    index.html

可以看到，对应的css、js、map都在这里。

注意，文件名中无意义的字符串是随机生成的。目的是为了让文件名发生变化，方便部署，同时方便Nginx服务器重新对该文件进行缓存。

•app.css：编译后的CSS文件。

•app.js：最核心的js文件，几乎所有的代码逻辑都会打包到这里。

•manifest.js：生成的周边js文件。

•vendor.js：生成的vendor.js文件。

另外，每个.map文件都非常重要。可以简单地认为，有了.map文件，浏览器就可以先下载整个.js文件，然后在后续的操作中“部分加载”对应的文件。

切记这个文件夹不要放到git中。因为每次编译之后，这里的文件都会发生变化。

3.6.4 node_modules文件夹

node项目所用到的第三方包特别多，也特别大。这些文件是由命令$ npm install产生的。所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。

package.json:

// ...
"dependencies": {
  "vue": "^2.3.3",
  "vue-resource": "1.3.3",
  "vue-router": "^2.3.1",
  "vuex": "^2.3.1"
},
"devDependencies": {
  "autoprefixer": "^6.7.2",
  "babel-core": "^6.22.1",
  "babel-loader": "^6.2.10",
  "babel-plugin-transform-runtime": "^6.22.0",
  "babel-preset-env": "^1.3.2",
  "babel-preset-stage-2": "^6.22.0",
  "babel-register": "^6.22.0",
  //...
}
// ...

node_modules文件夹中往往会有几百个文件夹，如图3-24所示。

图3-24 node_modules文件夹

注意，这个文件夹不能放到git中。

3.6.5 src文件夹

src文件夹是核心源代码的所在目录。展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的）：

▾ src/
    assets/
    logo.png
    components/
    Book.vue
    BookList.vue
    Hello.vue
   router/
    index.js
   App.vue
  main.js

•assets文件夹用到的图片都可以放在这里。

•components用到的“视图”和“组件”所在的文件夹（核心）。

•router/index.js是路由文件，定义了各个页面对应的url。

•如果index.html是一级页面模板的话，App.vue就是二级页面模板。所有的其他Vue.js页面都作为该模板的一部分被渲染出来。

•main.js没有实际的业务逻辑，但是为了支撑整个Vue.js框架，很有必要存在。