此檔案是配置檔案，在命令列裡選擇的內容 在裡面也可以顯示 cnpm install 也是根據此檔案來構建依賴

各種依賴包

開發的各種資源 

執行專案描述資源

打包配置檔案，讓Ide寫的vue檔案伺服器可以識別

路由配置檔案

Vue裡面的結構

<template>html程式碼

<script>業務邏輯程式碼

<style lang="scss">樣式程式碼

——————————————————————————————————
vue的模板裡面 所有的內容要被一個根節點包含起來
例如
<div id = "app"></div>

——————————————————————————————————

繫結資料，這樣兩個括號就代表直接引用變數

<template>
  <div id="app">
    <h2>{{sola}}</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      sola : '繫結資料，好久不見html'
    }
  }
}

繫結物件 

<template>
  <div id="app">
    <h2>{{sola}}</h2>
    <h1>{{obj.name}}</h1>
    <h1>{{obj.age}}</h1>
    <h1>{{obj.money}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      sola : '繫結資料，好久不見html',
      obj : {
      	name:"sola",
      	age:"99",
      	money:"窮"
      }
    }
  }
}
 

繫結陣列

<template>
  <div id="app">
    <h1>{{list[0]}}</h1>
    <h1>{{list[1]}}</h1>
    <h1>{{list[2]}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      list : ["111","222","333"]
    }
  }
}
</script>
 

遍歷陣列（把遍歷in到另一個引用遍歷裡）

<template>
  <div id="app">
    <hr />
    <ul>
    	<li v-for="solalist in list">{{solalist}}</li>
    </ul>  
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      list : ["111","222","333"]
    }
  }
}
</script>

小測試

    <ul>
    	<li v-for="solalist in list">{{solalist}}</li>
    </ul>
    <table border="1" cellspacing="" cellpadding="">
    	<tr v-for="solalist in list">
    		<td v-for="solalist in list">{{solalist}}</td>	
    	</tr>
    </table>

表格迴圈

 </table>
        <table border="1" cellspacing="" cellpadding="">
    	<tr v-for="solalist in list1">
    		<td >{{solalist.title}}</td>
    		<td >{{solalist.name}}</td>	
    	</tr>
    </table>