Vue项目启动文件加载分析与页面调用分析

一、Vue项目结构

1、打开项目

准备好开发工具，这里我用的是VSCode，用什么都可以，导入生成的项目。这是刚生产的项目结构。

2、项目目录及文件说明

2.1、项目主体结构

• build：项目构建(webpack)相关代码
• config：配置目录，包括端口号、环境变量等。我们初学可以使用默认的。
• node_modules：npm 加载的项目依赖模块(根据package.json安装时候生成的的依赖安装包)
• src：开发目录，基本上要做的事情都在这个目录里。
• static ：静态资源目录，如图片、字体等。
  • .gitkeep：git配置。
• .babelrc：es6解析的一个配置
• .editorconfig：编辑器的配置文件
• .eslintignore：忽略eslint语法规范检查配置文件
• .eslintrc.js：eslint（代码格式化检查工具）的配置文件，开启以后要严格遵照它规定的格式进行开发
• .gitignore：忽略git提交的一个文件，配置之后提交时将不会加载忽略的文件
• .postcssrc.js：文件是postcss-loader包的一个配置
• index.html：首页入口文件，经过编译之后的代码将插入到这来。
• package.lock.json：锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致
• package.json：项目配置文件。需要哪些npm包来参与到项目中来，npm install命令根据这个配置文件增减来管理本地的安装包。
• README.md：项目的说明文档，markdown 格式

2.2、build目录

• build
  • build.js：构建生产版本。package.json中的scripts的build就是node build/build.js，输入命令行npm run build对该文件进行编译生成生产环境的代码。
  • check-versions.js：用于检测node和npm的版本，实现版本依赖
  • utils.js：utils是工具的意思，是一个用来处理css的文件。
  • vue-loader.conf.js 该文件的主要作用就是处理.vue文件，解析这个文件中的每个语言块（template、script、style),转换成js可用的js模块。
  • webpack.base.conf.js：开发和生产共同使用提出来的基础配置文件，主要实现配制入口，配置输出环境，配置模块resolve和插件等
  • webpack.dev.conf.js：开发环境配置文件

2.3、config目录

• config：config内的文件其实是服务于build的，大部分是定义一个变量export出去。
  • dev.env.js：开发环境配置
  • index.js：定义开发环境或生产环境中所需要的参数
  • prod.env.js：生产环境配置

2.4、src目录

• src：
  • assets：脚手架自动会放入一个图片在里面作为初始页面的logo。平常我们使用的时候会在里面建立js，css，img，fonts等文件夹，作为静态资源调用
  • components：用来存放组件，合理地使用组件可以高效地实现复用等功能，从而更好地开发项目。
  • router：路由相关的内容。该文件夹下有一个叫index.js文件，用于实现页面的路由跳转
  • main.js：入口文件，主要作用是初始化vue实例并使用需要的插件，小型项目省略router时可放在该处
  • App.vue：主组件，可通过使用开放入口让其他的页面组件得以显示。也可以直接将组件写这里，而不使用 components 目录。

二、项目启动后文件加载过程

      当我们使用 vue-cli 脚手架初始时创建一个项目后，下一步肯定是把这个项目跑起来，那么我们如何将项目跑起来呢？很简单，本地调试命令行执行 npm run dev，打包放到服务器上跑起来则是 npm run build（ npm run dev 运行报错的同学看这里）。

1、执行npm run dev

1.1、加载package.json文件

      在执行 npm run dev 的时候，会在当前目录中寻找 package.json文件（npm的配置文件，包含项目的名称版本、项目依赖等相关信息，可通过webpack --config指令指定加载配置文件）,有点类似 Maven 的 pom.xml 文件。
      在package.json文件中scripts中的子项即是我们在控制台运行的脚本的缩写。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    // npm run dev 的 dev 直接运行开发环境 
    // webpack-dev-server:启动了http服务器 
    // inline模式会在webpack.config.js入口配置中新增webpack-dev-server/client?http://localhost:8080/的入口,使得我们访问路径为localhost:8080/index.html
    "start": "npm run dev", //npm run start 跑的是同样的命令
    "build": "node build/build.js" //使用node运行build/build.js文件
  },

      因此，在启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server（一个小型的Node.js Express服务器，主要用于前端项目的本地开发和调试，内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求）。

1.2、加载配置文件webpack.dev.conf.js

      这个文件里引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件./config/index.js（有一些生产环境和开发环境的配置）和 webpack.base.conf.js（该配置文件主要是：合并基础的webpack配置、使用styleLoaders、配置Source Maps、配置webpack插件等）。

      这个文件中我们要关注的几个配置如下所示（已省略部分内容）：

// 引入config目录中的index.js配置文件
const config = require('../config')
// 开发和生产共同使用提出来的基础配置文件，主要实现配制入口，配置输出环境，配置模块resolve和插件等
const baseWebpackConfig = require('./webpack.base.conf')
//下面是合并配置对象，将这个配置文件特有的配置添加替换到base配置文件中
const devWebpackConfig = merge(baseWebpackConfig, {
  // 这些devServer选项都是在config/index.js中设定好的
  devServer: {
    open: config.dev.autoOpenBrowser, //调试时是否自动打开浏览器
    proxy: config.dev.proxyTable, // 设计到跨域问题时启用代理
  },
  plugins: [
    //用来定义全局变量
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new HtmlWebpackPlugin({ //生成创建html入口文件
      filename: 'index.html',
      template: 'index.html',  //指定注入的模板
      inject: true
    }),
  ]
})
new HtmlWebpackPlugin({ //生成创建html入口文件，vue.app要注入的模板
      filename: 'index.html',
      template: 'index.html',  //指定注入的模板
      inject: true
}),

1.3、引入config目录中的index.js配置文件

      在 webpack.dev.conf.js 文件中由const config = require('../config')引入了 index.js 文件中的配置，这个文件中我们要关注的几个配置如下所示（已省略部分内容）：

const path = require('path')

module.exports = {
  dev: { //开发环境下的配置
    // Paths
    assetsSubDirectory: 'static', //子目录，一般存放css,js,image等文件
    assetsPublicPath: '/', //根目录
    proxyTable: {}, //可利用该属性解决跨域的问题
    // Various Dev Server settings
    host: 'localhost', //地址
    port: 8080, //端口号设置，出现端口号被占用问题可在此处修改
    autoOpenBrowser: false, //是否在编译（输入命令行npm run dev）后打开http://localhost:8080/
  },
  build: {// 生产环境下面的配置
  }
}

1.4、引入webpack.base.conf.js配置文件

      在 webpack.dev.conf.js 文件中由 const baseWebpackConfig = require('./webpack.base.conf') 引入了 webpack.base.conf.js 文件中的配置，这个文件中我们要关注的几个配置如下所示（已省略部分内容）：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js' //配置入口，默认为单页面所以只有app一个入口app: './src/main.js'}
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
}

2、结论

正是因为1.2中webpack.dev.conf.js

new HtmlWebpackPlugin({ //生成创建html入口文件
      filename: 'index.html',
      template: 'index.html',  //指定注入的模板
      inject: true
    }),

与1.4中 webpack.base.conf.js 的配置

entry: {
    app: './src/main.js' //配置入口，默认为单页面所以只有app一个入口app: './src/main.js'}
  },

页面的入口文件为根目录下的 index.html ，程序的入口文件为 ./src/main.js。

三、页面调用关系

我们将项目跑起来之后，初始界面如下图所示：

那么界面为什么是这样的呢，可能有的同学还不清楚，让我们来一起看看代码。

      首先是 根目录下的index.htm文件，代码如下：

      上面以及说过了这个文件是 页面入口 ，而在body标签里只有一个id为app的div元素。我们页面的内容肯定是写在body里的，那这个div元素是如何变成页面上展示的内容的呢？

      上面也说过，src目录下的main.js文件 是 程序的入口 ，在这个文件里引入了vue与同级目录下的App.vue组件，并且还创建了一个名为app的全局Vue实例，这个实例的模板就是引入的App组件。也就是说，程序 创建了一个app实例，挂载到了index.html文件的div元素上 ,那么此时div元素的内容也就由被App.vue所取代。

      现在页面的内容由App.vue所决定，让我们看看App.vue的内容，代码如下：

      首先是一个id为app的div元素，里面放了一个img元素，这张图也就是界面上Vue图标的由来，那么下面的HelloWorld组件自然也就是界面上的欢迎语和下面的链接的由来啦。让我们再看看HelloWorld.vue文件。

      由于代码太长，我就只贴了一部分代码，但是管中窥豹，这个组件的内容就是界面剩下的内容了。

至此，Vue项目启动时的文件加载分析和页面调用分析都写完啦，大家看懂了吗？

      在此感谢 vue项目结构及启动文件加载过程分析 和 从vue新建页面过程看vue项目文件调用关系 这两篇博客，这两篇博客对我帮助非常大，如果大家看我的博客对以上内容还是不太清楚的话可以去看看这两篇博客，他们写的比我更详细，对大家理解这些内容应该会有一些帮助。