*第5章脚手架(2)代码详解(1)

目标

项目结构
目录解析
执行流程

项目结构

由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。
以下项目结构是vue-cli@2.9.6版本

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                        // 生产环境构建代码
|   |-- check-version.js                // 检查node、npm等版本
|   |-- logo.png                        // logo图片
|   |-- utils.js                        // 构建工具相关
|   |-- vue-loader.conf.js              // vue-loader配置
|   |-- webpack.base.conf.js            // webpack基础配置
|   |-- webpack.dev.conf.js             // webpack开发环境配置
|   |-- webpack.prod.conf.js            // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                      // 开发环境配置
|   |-- index.js                        // 项目主要配置(包括监听端口，打包路径等)
|   |-- prod.env.js                     // 生产环境配置
|-- src                              // 源码目录
|   |-- assets                         // 静态资源 
|   |-- components                     // vue公共组件
|   |-- router                         // vue路由
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcssrc.js                    // post-loader的插件配置文件
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
|-- package-lock.json                // 锁定当前安装的包的依赖
|-- README.md                        // 项目说明

注意
config/index.js下是主要配置项，可修改域名，端口，首页等

目录解析

1.build——[webpack配置]-- 建议了解

build文件主要是webpack的配置，主要启动文件是webpack.dev.conf.js，当我们输入npm run dev首先启动的就是webpack.dev.conf.js，它会去检查node及npm版本，加载配置文件，启动服务。
2.config——[vue项目配置]

config文件夹主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等

3.node_modules——[依赖包]

node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。

4.src——[项目核心文件]

项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js和router

main.js——[入口文件]
主要是引入vue框架，根组件及路由设置，并且定义vue实例，下面的components:{App}就是引入的根组件App.vue

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
    //router:router  属性和值一样的时候，可以直接简写router
    //router文件夹下，有一个index.js，即为路由配置文件,路由到的页面会在App.vue的template<router-view/>处渲染
  router,
  components: { App },
  template: '<App/>'
})

后期还可以引入插件，当然首先得安装插件。

router——[路由配置]
router文件夹下，有一个index.js，即为路由配置文件
这里定义了路径为’/'的路由，该路由对应的页面是HelloWorld组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的HelloWorld组件

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

类似的，我们可以设置多个路由，‘/index’,’/list’之类的，当然首先得引入该组件，再为该组件设置路由。

vue框架核心组成文件介绍

config\index.js:核心配置文件
App.vue:页面入口文件
main.js:程序入口文件，加载各种公共组件
components包:存放公共组件的文件夹

执行流程

个人观察结果，仅供参考

程序启动
读取config\index.js，获取初始访问页，进入index.html
读取main.js
加载App.vue页面入口文件
(App.vue模板中有一个router)根据请求url地址到src\rounter\index.js中匹配指定的组件（HelloWorld.vue）
将HelloWorld.vue里的template内容填充到App.vue<router-view/>处。
如果App.vue模板id与index.html里的重复，会覆盖掉index.html原有内容。

*第5章脚手架(2)代码详解(1)