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

最新推荐文章于 2023-09-21 11:52:31 发布

逆袭的小学生

最新推荐文章于 2023-09-21 11:52:31 发布

阅读量2k

点赞数 1

分类专栏：前端知识文章标签： vue webpack

本文链接：https://blog.csdn.net/q610376681/article/details/101600207

版权

前端知识专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

https://www.jianshu.com/p/d1083240c90a

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

参考博客：https://www.cnblogs.com/zeroes/p/vue-run-dev.html#commentform

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文件

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

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

在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>
    <!-- built files will be auto injected -->
  </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>

第三章 router-view

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

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

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

逆袭的小学生

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录