文件流程及根組件app
- 文件流程
項目啓動後,vue通過內部文件的加載機制首先加載index.html,然後調用main.js程序文件,最後通過vue實例引入根組件App.vue
index.html(入口模板文件)->main.js(程序入口文件)->App.vue(組件入口文件)
- main.js
import Vue from 'vue' //導入vue模塊,相當於引入vue.js
import App from './App' //導入App根組件
Vue.config.productionTip = false //阻止啓動生產提示
/* eslint-disable no-new */
new Vue({
el: '#app',//實例對象控制的根元素,和index.html中的id對應
components: { App },//註冊根組件
template: '<App/>' //存放組件調用的跟標籤
})
- App.vue
//模板:html結構
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
//行爲:處理邏輯
<script>
import HelloWorld from './components/HelloWorld' //導入components文件夾中的HelloWorld組件
export default {
name: 'App',
components: {
HelloWorld //註冊HelloWorld組件
}
}
</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>
其他的組件,實際上也是這樣的結構。
開發中,我們只需要操作.vue文件,其他文件我們基本不用去動(除了做一些配置)。
- HelloWorld.vue組件
//模板:html結構
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
//行爲:處理邏輯
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
//解決樣式
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
注意:組件template中,必須要有一個根元素(如所有元素都包含在div標籤中)。
data(){}是es6的寫法,相當於data:function(){}
組件中export default 是es6的寫法,是指輸出組件,在調用組件時,使用import 導入。
QQ:732005030
掃碼加微信