Vue启动index.html如何被渲染的

小白浏览：6522020-12-08 14:19:53本文累计收益：￥0元我也要赚钱

第一步：cmd进入项目文件里，运行npm run serve 启动项目这里说明启动端口号是8080

第二步：往页面输入：localhost:8081

二、解析渲染步骤

先看整体框架样式和index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

从上面我们可以看出，index的body中只有一个id为app的div，那是如何被渲染的呢。一步一步寻找

第一步：main.js

main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  i18n,//挂载i18n
  router,
  store,
  components: { App },
  template: '<App/>'
})

这里new Vue代表新建vue对象

el官方解释：为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。

这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

components:代表组件。这里是'App',这说明。首先页面肯定有<app></app>这样的标签，同时有个组建为‘App.Vue‘文件

这个地方我思考好久，才明白，首先App.vue是有的，因为上面已经import导入了，但index.html中并没有<app></App>标签

template：代表模板。官方解释：模板将会替换挂载的元素。挂载元素的内容都将被忽略。

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

第二步：App.vue

首先一个正常的vue结尾的文件里，一般包含三部分:<template>,<script>,<style>

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<style>
    @import "../static/css/main.css";
    @import "../static/css/theme-green/color-green.css"; 
    /* @import '../static/css/theme-green/index.css'; */
    
</style>

这里面的<img>标签，就代表页面的vue的logo,它下面又有一个组件<HellWord>

我们只要在进入到HellWord.vue中明白了。

第三步：HellWord.vue

这样一来，页面所渲染的东西都找到了，其实并不复杂，只是在main.js稍微绕了个弯。

自己也是一边学一边写，有错的地方或者有更好的解释也希望大家予以指点。

上一篇：vue 使用 vuex-persist 让store实现更便捷的存储 localStorage

下一篇：使用Vue.prototype在vue中注册和使用全局变量

猜您可能还喜欢

评论列表

发表评论

小白

+ 关注

199
文章
20
资源
0
排名
250元
收益

阅读排行