Vue开发命令 npm run dev 输入后的执行过程

骑猪看日落 2024-04-17 06:23 70阅读 0赞

# 前言 #

通过vue init webpack和npm install命令初始化项目后，执行npm run dev就打开了网站http://localhost:8080。初学者不知道index.html、App.vue、main.js是如何粘在一起的，这里简单说明一下。

# 启动过程 #

## 1.npm run dev ##

`npm run XXX`是执行配置在package.json中的脚本，比如：

"scripts": {
        "dev": "node build/dev-server.js",
        "start": "node build/dev-server.js",
        "build": "node build/build.js"
      },

这里就是执行了 node build/dev-server.js文件。

## 2.main.js和index.html ##

build/dev-server.js里var webpackConfig = require('./webpack.dev.conf') 调用了webpack.dev.conf配置文件。

var config = require('../config')
    if (!process.env.NODE_ENV) {
      process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
    }
    
    var opn = require('opn')
    var path = require('path')
    var express = require('express')
    var webpack = require('webpack')
    var proxyMiddleware = require('http-proxy-middleware')
    var webpackConfig = require('./webpack.dev.conf')

webpack.dev.conf文件通过merge引用了webpack.base.conf.js文件。

![format_png][]

在webpack.base.conf.js文件中调用了./src/main.js

![format_png 1][]

main.js用到了一个html元素\#app。

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Mint from 'mint-ui'
    
    var jquery = require('jquery');
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })

再次回到webpack.dev.conf.js文件的结尾处。

new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        }),

template指定了index.html作为输出文件的模板文件。

## 3.App.vue和Hello.vue ##

在main.js文件中引用了App.vue和router。

![format_png 2][]

App.vue里有个router-view元素，所有通过router返回的vue都会填充在这个元素里面。

router/index.js文件中的路由配置，当访问根目录时就返回@/components/Hello.vue里的内容。

{
          path: '/',
          name: 'Hello',
          component: Hello
        },

所以最后看到的页面是由App.vue和Hello.vue两个模块组成的。

![format_png 3][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvOTAzNjQ2LzIwMTcwNy85MDM2NDYtMjAxNzA3MjcxOTU3NDIxMDItMjE0NDQ0MTQ4OS5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvOTAzNjQ2LzIwMTcwNy85MDM2NDYtMjAxNzA3MjcxOTU5NDAwNDAtNjkxOTIwMTEwLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvOTAzNjQ2LzIwMTcwNy85MDM2NDYtMjAxNzA3MjcyMDExMzY5MzAtOTY2NTgxOTgxLnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvOTAzNjQ2LzIwMTcwNy85MDM2NDYtMjAxNzA3MjcyMDIwMDMzMzYtMTg2MTk1NDI5OC5wbmc?x-oss-process=image/format,png