1. 项目框架

1.1 项目架构图

整体搭建架构图如下：

image.png

1.2 项目结构

以vue-cli 2.0 版本为例，其中src文件夹是需要掌握的

image.png

2.入口文件解析

项目加载的过程是index.html->main.js->app.vue->index.js->helloworld.vue ，前面的四项是入口相关文件。

2.1 项目运行入口文件 index.html

index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>y</title>
</head>
<body>
  <div id="app"> wwww</div>
  <!-- built files will be auto injected -->
</body>
</html>

这里id='app'，这个id将会连接到src/main.js，把vue实例挂载到的该dom元素，这里没有引入任何的js，css，都是通过webpack实现的

2.2 项目入口文件 main.js

其作用有三：

定义了vue实例
挂载到index.html中id为‘app’的节点上
引入根组件app.vue
引入路由文件

import Vue from 'vue'
import App from './App'
// 引入路由文件: router 文件下的 index.js 文件(文件夹后没有具体的文件，默认引入的就是 index.js 文件)
import router from './router' 

Vue.config.productionTip = false

/* eslint-disable no-new */
/**
 * 创建Vue实例
 * 挂载到index的dom元素上
 * 引入跟组件
 * 跟组件模板替换替换挂载的元素
 */
new Vue({
  el: '#app', // 挂载到index.html
  router, //引入路由
  components: { App }, // Vue 实例可用组件列表, 在这里引入根组件。组件名为APP，也可以修改组件名字：{'root':App}
  template: '<App/>'// 模板（根组件）将会替换挂载的元素，挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
})

几个疑问：

main.js为什么叫入口文件？
运行后index.html实际页面中仅挂载了app.js一个脚本，所有组件去哪儿了，app.js是如何形成的？
vue实例化在main.js中，但在index.html中并没有引入main.js，main.js与index.html是如何产生关联的？

而上述问题都是由webpack逐一处理的，vue cli搭建的项目本质是一个集成预设置的webpack项目。具体解决手段：

入口文件是一个webpack概念；入口文件是webpack构建内部依赖图的起点。
app.js是由webpack打包生成的输出文件。
而将app.js挂载到index.html这一过程是由webpack的一个插件——html-webpack-plugin完成的。

在webpack.base/webpack.dev中，vue默认设置main.js为项目的唯一入口。,在项目打包时，webpack会从main.js开始构建依赖图，梳理整个项目依赖且不重复的模块。

  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    //filename定义的是输出文件的名称，[name]是webpack中的占位符，它对应entry中对象的键名。
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

2.3 根组件 app.vue

它的作用：单页面应用的主组件。所有页面都是在 App.vue 下通过路由进行切换的。所以，我们可以理解为所有的路由（route）也是 App.vue 的子组件。
（1）App.vue中的内容，是一个标准的App.vue模板的形式，包含了<template></template>、<script></script>、<style></style>三部分。node 之所以可以识别出 *·vue 格式的文件，webpack 在编译时将 *.vue 文件中的 html 、js 、css 都抽出来形成新的单独文件。
（2）<template>标签下，有<router-view>标签，当访问根路由 http://localhost:8080/#/ 时，App.vue 中的 <router-view/> 就会把引入的 HelloWorld 组件分配渲染。

根组件的核心就是通过<router-view />加载不同组件渲染

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

2.4 路由文件 router/index.js

这个文件就是路由的核心文件，具体配置：

import Vue from 'vue' // 引入Vue
import Router from 'vue-router' // 引入vue-router
import HelloWorld from '@/components/HelloWorld' // 引入根目录下的HelloWorld.vue组件

Vue.use(Router) // Vue全局使用Router

export default new Router({
  // 配置路由，这里是个数组
  routes: [
    { // 每一个链接都是一个对象
      path: '/', // 链接路径
      name: 'HelloWorld', // 路由名称，
      component: HelloWorld // 对应的组件模板
    }
  ]
})

路由是根据 url 来分配不同的组件。
如果访问：http://localhost:8080/#/vue，需要配置/vue路由

    {
      path: '/vue',
      name: 'vue',
      component: Vue
    }

如果访问：http://localhost:8080/#/vue/demo，详细配置：

  {
   path: '/vue',
   name: 'vue',
   component: Vue,
   children: [
    {
     path: '/demo',
     component: demo,
    },
    {
     path: '/project',
     component: project,
    },
   ],
  }

3. vue-cli关闭/禁用/使用ESLint语法检测功能

使用vue-cli命令‘vue init webpack 项目名称’创建项目的过程中，如果无意选择了ESLint语法检测，会在项目目录中出现如下的ESLint配置文件。

image.png

（1）禁用ESLint
在项目的本目录下面config—index.js 文件夹中配置一下就可以禁用useEslint设为false。

image.png

4.webpack配置

4.1打包配置解析

webpack必备的配置文件package.json存放了各种命令，这里核心的是运行命令和编译打包命令

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js"
  }

（1）打包命令build

image.png
流程详解:
一：build.js
第一步运行的入口文件，载入生产环境配置文件webpack.dev.conf.js
二：配置webpack
与环境无关的公共配置都放在webpack.base.conf.js中，和环境有关的分开配置，比如：生产环境配置webpack.prod.conf.js，开发环境配置webpack.dev.conf.js。使用的时候两个对象合并，比如公共配置合并到生产环境配置中

//webpack.prod.conf.js
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
.........
})

三：配置信息
存放一些配置信息常量。和配置webpack思路类似，公共配置信息放在index.js中，和环境有关的分开放在配置信息，所有的配置信息放在config目录下。然而实际详情是在index.js文件中各个环境的配置已分开，没有公共部分。