vue脚手架创建的项目中的 app.vue、main.js、index.html的关系

最新推荐文章于 2023-07-31 10:37:13 发布

前端-阿辉

最新推荐文章于 2023-07-31 10:37:13 发布

阅读量1.8k

点赞数 8

分类专栏： Vuejs 文章标签： vue vue.js

本文链接：https://blog.csdn.net/bigpatten/article/details/106090451

版权

Vuejs 专栏收录该内容

48 篇文章 4 订阅

订阅专栏

我们知道，使用 vue-cli 创建的项目结构是这样的：
在这里插入图片描述

public/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>

src/main.js

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

      <h1>您好，世界</h1>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

这些文件分别是什么呢？

public/index.html ：打包的模板

我们学习 webpack 的时候，知道 webpack 配合着 html-webpack-plugin 插件，可以实现打包我们的代码的同时，使用 html 模板，打包后会根据 html 模板生成一个新的html文件，同时将我们打包后的脚本文件插入到这个新生成的 html 文件中。
src/main.js : 项目的入口文件

我们一般在这个文件中引入我们需要的资源，路由等，然后得到一个 Vue 实例，同时将 Vue实例挂载到 App.Vue 中的 <div id='#app'></div>。
src/App.vue ：根组件

我们知道，我们现在创建的项目其实是一个单文件应用，也就是说，其实整个项目就只有一个页面。这个App.vue 就是我们项目的根组件，它是在 main.js 中得到 Vue实例前被加载。

其实在 public/index.html 文件中也有一个 <div id='#app'></div>，这只是个模板文件，在浏览器执行我们的项目的时候，这个 <div id='#app'></div> 会被更早的渲染，不过很快就被 src/App.vue 根组件中的 <div id='#app'></div> 覆盖了。