上一篇《Vue開發環境搭建及熱更新》，我們講解了vue開發環境的搭建還有一些小問題，接下來我們來講解一下這個界面是如何形成的。
在開始講之前，我們先來看看我們上一篇所謂的項目目錄里面到底放着什么。
1.index.html文件入口 ；
2.src放置組件和入口文件 ；
3.node_modules為依賴的模塊 ；
4.config中配置了路徑端口值等；
5.dist是存放打包之后的東西；
6.build中配置了webpack的基本配置、開發環境配置、生產環境配置等。
一、src文件夾
我們先從src文件夾開始說起
我們先進入src，在src目錄下輸入ls，ls是查看當前目錄的命令行。我們發現src文件夾里面有App.vue文件，assets文件夾，components文件夾，main.js文件，還有router文件夾。
看過前一篇推薦的慕課網視頻我們就知道，項目的打包需要一個入口文件，那這個入口文件在哪里呢？在build目錄下，有一個webpack.base.conf.js文件，里面有這么一段代碼。
entry定義的就是入口文件，我們可以看到src目錄下的main.js文件就是入口文件。App.vue是主組件，所有組件都是在App.vue下進行切換的。components文件夾就是存放組件的地方，像我們這個項目，里面就只是存放着一個Hello組件（關於vue組件的相關知識，這里推薦一位大神keepfool的博客，有兩篇，這里鏈接的是上篇），assets文件夾存放的是圖片，router文件夾存放的是路由（關於vue-router的相關知識，keepfool大神也有相關的文章）。
二、components文件夾
該文件夾下面只有Hello.vue這個文件。一個.vue文件包含三個部分<template><script><style>。現在的項目基本都用ES6的寫法（ES6的優勢在於模塊化Module，當然這只是其中一個優勢，估計以后會慢慢的變ES6為主流），雖然vue的官方文檔還是用ES5的語法，但是這種ES6寫法慢慢看還是看得懂的。
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>
1.<template>標簽
<template>標簽里面有個class為hello的div，在<script>里面的name也為hello，在這里這兩者之間沒有什么聯系，就算把class=“hello”刪掉，結果還是一樣（可以試試看）。
在ES5中，有一種寫法和<template>類似，那就是<script>標簽：
<!--HTML-->
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
<div>Hello world</div>
</script>
<!--Js-->
Vue.component('my-component',{template:'#myComponent'})
new Vue({el:'#app'})//掛載到id為app的div上
<script>將<div>Hello world</div>替換到<my-component>的位置。使用<script>標簽時，設置type意在告訴瀏覽器這不是一段js腳本，然后將這個元素的HTML作為模板進行編譯。用<template>的寫法是這樣的
<!--HTML-->
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>Hello world</div>
</template>
<!--Js-->
Vue.component('my-component',{template:'#myComponent'})
new Vue({el:'#app'})//掛載到id為app的div上
用起來其實差不多。
2.<script>
組件里面的data，要寫為函數的形式
data () { return { msg: 'Welcome to Your Vue.js App' } }
否則寫成以下的形式會出錯
data：{ msg: 'Welcome to Your Vue.js App' }
這一點在vue的官網中，data必須是函數小節也有提到。
3.<style>
我們會發現<style>標簽里面還有個小東西，叫做scoped，加入這個詞有什么作用呢？
在vue組件中我們我們經常需要給style添加scoped來使得當前樣式只作用於當前組件的節點。
三、App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</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>
在<template>里面，我們發現了一個標簽<router-view>,通過我們在網頁上的比對，我們可以知道<img>圖片下面就是我們剛剛分析得半死的hello組件。那為什么它會變成了<router-view>,這就是路由的作用。在頁面上使用<router-view></router-view>標簽，它用於渲染匹配的組件。那怎么知道<router-view>代表的就是hello組件。接着下一點就是原因。
四、router文件夾里面的index.js
import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] })
首先它導入了vue模塊，引入了vue-router插件，還有components目錄下的Hello.vue（此處省略了.vue后綴，效果一樣）。從export default開始都是配置使用路由的，當途徑為“/”的時候，就顯示hello組件（這些語法在keepfool大神的博客都有提到）。我們剛剛打開時候的頁面，地址欄顯示的地址是http://localhost:8080/#/，后面這個橫杠，匹配的就是hello組件，所以前一節<router-view>代表的就是hello組件。在地址欄中，“/”是默認加上去的，也就是說，就算你在輸入地址的時候，不給它加上“/”，只有http://localhost:8080/#這樣，回車之后也會自動加上。
五、入口文件main.js
前面我們知道了，入口文件是main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
首先導入vue模塊，導入App.vue（App.vue已經把components文件夾里面的組件都整合在一起了，所以在入口文件我們導入它就行了），最后是導入router目錄下的index.js。如果import xx form ‘一個文件夾’，打包的時候會自動查找文件夾里面的index.js文件。之前我挺納悶為什么new Vue里面有router這種只有鍵沒有值的寫法，其實它相當於router：routers，這個其實我們開頭已經導入並賦值給router了。關於template鍵，其實它的值寫成<App></App>也是可以的。
接下來就是組件的掛載，如果一個組件沒有掛載，那就相當聲明了之后卻沒有使用它。我們將它掛載到id為app的div上，這個id為app又是在哪里？很簡單，就在src同級目錄下的index.html文件里。
六、index.html
前一篇文章第八點我們說到，最后打包完生成了一些東西，其中有一個就是app.js
這個app.js就是以main.js 為入口文件打包之后生成的。最后渲染頁面的文件，就是導入了app.js 的index.html文件。看到這里相信大家對這個項目有了新的認識，但是有個小問題很多人容易混淆。
七、一個小問題
export default {} 跟 var vm = new Vue({}) 完全不是同一回事，前者是ES6的module中的語法，后者是創建一個vue實例。export的相關問題，大家可以點擊一下這個鏈接。