1、元件

元件化：通常指的是樣式（輪播圖，tab，列表區域）

模組化：通常指的是效果(彈框)

元件：每一個vue例項物件(可複用的vue例項)

元件的定義以及使用：

• 元件：

　　　　1、全域性定義元件，可複用的vue例項；2、區域性定義

• 全域性定義元件：

　　　　語法:Vue.component(元件名稱,{模板物件})

• 元件命名規範：

1. 採用駝峰方式命名，頁面使用的時候需要把大寫字母轉為連字元+字母，目的為了方便呼叫。
2. 採用小寫命名方式，直接在頁面使用即可<vone></vone>
3. 不能以現有的標籤名作為元件名

• 元件中的data定義：

　　　　1、data必須是方法 2、方法必須有返回值 3、返回值必須是物件型別

• 如果使用data中的資料：

　　　　在元件中宣告的資料需要在元件的模板中使用

• 元件中還可以有的配置項：

　　　　data，methods，filter，computed，watch，生命週期的鉤子函式....

2、template

• 元件中的模板物件：

　　　　有且只能有一個根元素

• template使用：

　　　　位置放到body的結束標籤上面，給當前的模板標籤新增id，同時把id賦值給元件的template

3、data

data為什麼在元件中是函式方式定義?

目的是為了實現資料共享而資料互相不影響

注意點：

1. data必須是函式
2. 必須有返回值
3. 返回值必須是物件

4、腳手架

1、全域性安裝webpack

　　npm install webpack -g

2、全域性安裝vue-cli

　　npm install vue-cli -g

以上兩步只需要安裝一次

下面就是建立專案

3、vue init webpack mydemo

專案名稱為小寫名字即可， 這是建立vue2.0專案

4、cd mydemo

進入建立的檔案中

5、npm run dev

啟動專案

// 淘寶映象

npm i -g cnpm --registry=https://registry.npm.taobao.org

當前資料夾中不能有vue.js檔案，如果有安裝腳手架會報錯

專案安裝：

　　1、安裝腳手架完成

　　2、清空工作

　　3、建立每一個元件（後臺頁面）

-componets

　　-header.vue

　　-main.vue

　　-footer.vue

APP.vue中 
<template>
  <div class="box">
    <v-header></v-header>
    <v-main></v-main>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vHeader from './components/header'
import vMain from './components/main'
import vFooter from './components/footer'
export default {
  components: {
    vHeader,
    vMain,
    vFooter
  }
}
</script>

<style scoped>
  .box{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
</style>

在main.js中引入靜態資源
// 引入靜態資源
import './assets/css/reset.css'
//建立公共元件
import vDel from './components/del.vue'
Vue.component('vDel',vDel)