1.main.js是我們的入口文件磺送,主要作用是初始化vue實例并使用需要的插件驻子。
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
2.App.vue是我們的主組件估灿,所有頁面都是在App.vue下進(jìn)行切換的。其實你也可以理解為所有的路由也是App.vue的子組件域慷。所以我將router標(biāo)示為App.vue的子組件。
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
總結(jié):
1.index.html文件入口犹褒;
2.src放置組件和入口文件弛针;
3.node_modules為依賴的模塊;
4.cofig中配置了路徑端口值等削茁;
5.build中配置了webback的基本配置、開發(fā)環(huán)境配置慰丛、生產(chǎn)環(huán)境配置等。
main.js是我們的入口文件诅病,主要用于初始化vue實例粥烁,并使用需要的插件。
App.vue是我們的主組件页徐,所有的頁面都在App.vue下進(jìn)行切換。我們可以將router標(biāo)示為App.vue的子組件变勇。
6.在每個模板中給style設(shè)置一個scoped屬性,意為該style的屬性只對這個組件起作用飞袋,不會影響到其他組件中含有相同class的元素。