理解最基本的Vue項目

上一篇《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><stype>。現在的項目基本都用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 () {
    return {
      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的相關問題，大家可以點擊一下這個鏈接。