[Vue.js破浪]——单文件组件（一）

本文链接：https://blog.csdn.net/qq_17004327/article/details/77164280

Vue.js破浪——Vue-Cli生成工程的目录结构详解

前言

单文件组件在大型的应用中能够有很好的模块化效果，使用单页面应用我们肯定离不开构建系统，其中最常用的构建系统就是Webpack和Browserify。在这篇文章中将会解析使用vue-cli生成的文件来学习关于webpack构建系统的相关知识。通过对webpack构建系统的学习，为后面真正使用单文件组件开发应用做铺垫。

目录解析

我们首先看一下使用脚手架生成的webpack构建应用的最简单的目录结构（使用vue init webpack-simple vuecli构建）

目录结构

各个文件或文件夹的作用如下：

node_modules文件夹放的是使用npm下载的依赖模块
src文件夹放的是我们编写的源码及所使用的资源
- assets 放的是我们需要的资源文件
.babelrc是babel的配置文件
.gitingnore 是git的配置文件，用于指引git应该忽略的文件
index.html是我们网页的主体
package-lock.json记录了已经处理好的依赖模块的相关信息
package.json记录的是整个工程的依赖模块
README.md是工程的介绍文件
webpack.config.js是webpack的配置文件

Webpack配置文件解析

在这么多文件和目录里面最重要的就是Webpack的配置文件也就是webpack.config.js。关于Webpack的详细讲解可以阅读官方指南。在这里我做简单的解析。

前两行使用的是CommonJs的语法引入模块，分别引入了path模块用于解析文件路径，和webpack模块用于解析配置文件。

接下来就是配置部分，可以看到有entry,output,module,resolve,devServer,performance,devtool等选项，接下来我们会介绍各个选项在配置文件中的作用。

entry是一个文件的路径，指明了webpack构建的入口，在这个示例中就是./src/main.js。
output中的一系列选项都是用于指定构建完的文件的存储路径以及参数
- path指定构建完成的文件存储的路径
- publicPath指定构建完成之后资源存储的初始地址
- filename指定构建完成的文件的文件名
module中列举了一些实现热重载所需要的加载模块
resolve用于指定相关文件关联的编译模块或解析模块
devServer用于配置开发过程中使用的轻量级服务器
performance用于配置是否提供性能相关的警告
devtool用于指定构建后代码的样式，例如是原始的代码还是压缩的代码还是优化后的代码

接着就是当运行环境为生产环境的时候，所用到的配置，例如重新配置devtool，配置相关的插件等。

下面列出配置的相关代码

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

其余文件解析

我们已经把最重要的webpack.config.js文件讲解完了，接下来还有.babelrc文件和package.json文件需要讲解
.babelrc就是babel的配置文件，其配置只是简单的一段

{
  "presets": [
    ["env", { "modules": false }]
  ]
}

这段配置的意思就是根据环境自动适配预处理器（"env"的含义）；只是用ES6默认的模块化系统，不适用如amd，umd等模块化系统（{"modules":false}的含义）

package.json主要是罗列工程的相关信息，以及各种依赖模块等，当执行npm install或者npm install --production的时候会根据这个文件中的依赖模块从仓库中下载依赖模块。
name,description,version,author,private就是用于给开发者攥写工程相关信息的。
script指定当执行dev或者build脚本的时候真正运行的脚本
dependencies用于列举工程在生产环境中的依赖模块
devDepemdencies用于列举工程在开发环境中的依赖模块

以下是package.json的相关代码

{
  "name": "vuecli",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "***",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

总结

我觉得很多人应该跟我一样一开始在接触CLI工具生成的目录结构的时候一筹莫展，为什么会突然间多了这么多文件，这些文件有什么用，我改一下会发生什么变化。我觉得如果一天不能解决目录结构的疑惑一天就不能放开手脚编写单文件组件应用，所以我花了几天的时间学习了webpack、npm和babel的官方文档，了解了使用构建工具生成工程的基本目录结构，然后再根据我所了解的写下来，在理解了目录结构之后我们就可以编写我们的单文件组件应用了。
其实之前接触这种目录结构真的非常多，Angular2，React甚至Egret都是这种结构，但之前没有横下心学习各种相关的知识，也借这次写博客的契机，学习了一波。其实在前端这个领域，使用构建工具构建的工程目录结构大概都是这样的，所以稍微理解一下目录结构真的受益匪浅。