解讀Vue-cli模板

1、npm run build 命令

        如何把寫好的Vue網頁放到伺服器上，主要的命令就是要用到npm run build 命令。我們在命令列中輸入npm run build命令後，vue-cli會自動進行專案釋出打包。你在package.json檔案的scripts欄位中可以看出，你執行的npm run build命令就相對執行的 node build/build.js 。

package.json的scripts 欄位：

     "scripts": {
        "dev": "node build/dev-server.js",
        "build": "node build/build.js"
      },

        在執行完npm run build命令後，在你的專案根目錄生成了dist資料夾，這個資料夾裡邊就是我們要傳到伺服器上的檔案。

dist資料夾下目錄包括：

    index.html主頁檔案:因為我們開發的是單頁web應用，所以說一般只有一個html檔案。
    static 靜態資原始檔夾：裡邊js、CSS和一些圖片。
 

2、main.js檔案解讀

main.js是整個專案的入口檔案,在src資料夾下：

import Vue from 'vue'      
import App from './App'
import router from './router'

Vue.config.productionTip = false   //生產環境提示，這裡設定成了false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

        通過程式碼可以看出這裡引進了App的元件和的模板，它是通過 import App from ‘./App’這句程式碼引入的。 我們找到App.vue檔案，開啟檢視：

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>

app.vue檔案我們可以分成三部分解讀，

<template></template>標籤包裹的內容：這是模板的HTMLDom結構，裡邊引入了一張圖片和<router-view></router-view>標籤，<router-view>標籤說明使用了路由機制。
 
<script></script>標籤包括的js內容：你可以在這裡些一些頁面的動態效果和Vue的邏輯程式碼。

<style></style>標籤包裹的css內容：這裡就是你平時寫的CSS樣式，對頁面樣子進行裝飾用的，需要特別說明的是你可以用<style scoped></style>來宣告這些css樣式只在本模板中起作用。

3、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
    }
  ]
})

        我們可以看到 import Hello from ‘@/components/Hello’這句話， 檔案引入了/components/Hello.vue檔案。這個檔案裡就配置了一個路由，就是當我們訪問網站時給我們顯示Hello.vue的內容。

4、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>