Vue | vue cli入口文件解析（main.js,app.vue,index.html webpack）

置顶

MGsniper

已于 2022-02-23 19:12:03 修改

阅读量2.2w

点赞数 42

分类专栏： vue webpack 文章标签： vue vue cli 入口文件 main.js webpack

于 2019-01-15 18:16:00 首次发布

本文链接：https://blog.csdn.net/qq_36145914/article/details/86497123

版权

前言

本文将从vue cli项目中的入口文件入手，深入浅出地解析vue cli在开发环境下的工程的运行原理。

有关vue cli 3(选读）

本文解析采用cli 2做示例，但原理同样适用于vue cli 3
若你是cli 3开发者，参考本文时，仅需注意cli 3的三点改动：

cli 3内化了项目默认配置(相关文件位于node_modules/@vue/cli-service/lib/config），开发者可通过新增vue.config.js添加webpack配置。
index.html被放到了public文件夹下
webpack配置的书写使用webpack-chain 风格

建议阅读本文时，参照你的本地文件，以加深理解。

1.入口文件的概述

在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。

main.js:

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

/* eslint-disable no-new */
new Vue({
   
  el: '#app', //挂载点
  components: {
    App }, // 根组件
  template: '<App/>'
})