基于Vue-cli构建的项目的运行流程

曾经终败给现在 2023-08-17 16:19 88阅读 0赞

前言：开始出来实习了，虽然一直在做后端，但是项目组目前需要做前端，所以重新开始学vue，这里我参考[https://zhuanlan.zhihu.com/p/50339730][https_zhuanlan.zhihu.com_p_50339730]

[https://www.jianshu.com/p/d1083240c90a][https_www.jianshu.com_p_d1083240c90a]

搭建了Vue项目，但是对项目具体怎么跑起来的仍有疑惑，所以从网上查阅资料进行学习。

参考博客：[https://www.cnblogs.com/zeroes/p/vue-run-dev.html\#commentform][https_www.cnblogs.com_zeroes_p_vue-run-dev.html_commentform]

[https://carsonwah.github.io/15213187968464.html][https_carsonwah.github.io_15213187968464.html]

**目录**

第一章 npm run dev

第二章 main.js和index.html

第三章 router-view

--------------------

# 第一章 npm run dev #

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

"scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
      },

这里就是执行了 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

# 第二章 main.js和index.html #

build/webpack.dev.conf.js调用了build文件夹里的webpack.dev.conf.js文件

![20190928103931486.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70][]

在webpack.base.conf.js文件中调用了./src/main.js，表示要将main.js进行打包，打包后输出到dist中。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70 1][]

![20190928115119360.png][]

在main.js中实例化了一个id=app的Vue实例，并引入了组件App。

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* main.js */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

再次回到webpack.dev.conf.js文件的结尾处，表示会将index.html作为输出文件的模板文件

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

总的来说就是要将main.js引入到index.html中。

main.js中的 el: '\#app'对应着index.html中的id=app，表示new的Vue要控制的是id=app中的区域。

template表示要用app组件替换index.html中的id=app的元素。

举个例子

如main.js为：

import Vue from 'vue'
    import AppComponet from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#myapp',
      router,
      components: { AppComponet },
      template: '<AppComponet/>'
    })

index.html为：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue-learn</title>
      </head>
      <body>
        <div id="myapp">
          hshshs
        </div>
        
      </body>
    </html>

app组件为：

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

app组件将替换id=app这个元素，最终表示为如下：

app组件替换了<div id="myapp">hshshs</div>

![20190928123842626.png][]

# 第三章 router-view #

可以看到app组件中，有一个<router-view/>，个人理解（不一定对），当main.js注入index.html后，路由检测到地址匹配路由中的/路径

export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

于是便用helloworld组件替换掉了<router-view/>元素。

[https_zhuanlan.zhihu.com_p_50339730]: https://zhuanlan.zhihu.com/p/50339730
[https_www.jianshu.com_p_d1083240c90a]: https://www.jianshu.com/p/d1083240c90a
[https_www.cnblogs.com_zeroes_p_vue-run-dev.html_commentform]: https://www.cnblogs.com/zeroes/p/vue-run-dev.html#commentform
[https_carsonwah.github.io_15213187968464.html]: https://carsonwah.github.io/15213187968464.html
[20190928103931486.png]: /images/20230810/ac29129e3197432d92136fa6cecd8de7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70]: /images/20230810/84919317a94545ac8afc146c2300d1a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70 1]: /images/20230810/3d22f0bdb12346bea234122dedfa4831.png
[20190928115119360.png]: /images/20230810/da2d5a4274984869bc139180c218dee4.png
[20190928123842626.png]: /images/20230810/c0644115f9ee4cf19c47c96ec70b6044.png