我们知道,使用 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>
覆盖了。