一蜈垮、初始Vue-Cli
Vue CLI是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)雕什。
1、安裝
全局安裝Vue-Cli

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

查看版本號(hào)

vue --version

升級(jí)

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

2苹粟、創(chuàng)建項(xiàng)目
安裝完成后有滑，創(chuàng)建項(xiàng)目。項(xiàng)目名為demo

vue create demo

執(zhí)行完成后會(huì)自動(dòng)生成項(xiàng)目的基本結(jié)構(gòu)

image.png

二嵌削、創(chuàng)建組件
1毛好、單文件組件
單文件組件：把一個(gè)組件全部?jī)?nèi)容匯合到一個(gè)文件中，文件名字是以 .vue 結(jié)尾掷贾，這個(gè)文件就是單文件組件睛榄。xxx.vue是vue的單文件組件烛亦。
每個(gè)vue的單文件組件由三個(gè)部分組成：template里面放置模板內(nèi)容熙参，script里面放置js代碼，style里面放置樣式忠怖。

<template>
  <div>
  </div>
</template>
<script>
  export default {
    name:'App'
  }
</script>
<style>
</style>

2港准、使用組件的步驟
（1）導(dǎo)入組件

import Child from './components/Child.vue'

（2）注冊(cè)組件

export default {
  // name選項(xiàng)定義組件的名稱(chēng)
  name: 'App',
  components:{
    Child
  }
}

（3）使用組件

  <div id="app">
    <Child></Child>
  </div>

三旨剥、父子組件之間傳值
1、子組件
子組件通過(guò)props定義屬性浅缸，接收父組件傳過(guò)來(lái)的數(shù)據(jù)轨帜。

props中定義的屬性是只讀、不可修改的衩椒，不過(guò)可以在data中對(duì)父組件傳遞過(guò)來(lái)的值進(jìn)行中轉(zhuǎn)蚌父，修改data中的數(shù)據(jù)哮兰。如果屬性是一個(gè)對(duì)象，可以通過(guò) obj.屬性名 修改對(duì)象的屬性值苟弛。
子組件通過(guò)$emit()觸發(fā)自定義事件喝滞，將最新的數(shù)據(jù)作為事件對(duì)象傳回去。

    <div class="child">
        <h3>{{title}}</h3>
        <hr>
        <p>車(chē)名：<input type="text" v-model="car.name"></p>
        <p>車(chē)價(jià)：<input type="text" v-model="car.price"></p>
        <hr>
        <p>飛機(jī)名稱(chēng)：<input type="text" v-model="myPlaneName"></p>
        <p>飛機(jī)價(jià)格：<input type="text" v-model="myPlanePrice"></p>
    </div>

// 每個(gè)組件膏秫，其實(shí)就是一個(gè)導(dǎo)出的對(duì)象
export default {
    name:'Child',
    props:['car','planeName','planePrice'],
    // 注意：組件里面的data一定要是一個(gè)方法右遭，由方法返回一個(gè)對(duì)象
    data() {
        return {
            title:'我是Child組件',
            // 中轉(zhuǎn)父組件傳遞過(guò)來(lái)的值
            myPlaneName : this.planeName,
            myPlanePrice : this.planePrice
        }
    },
    watch:{
        myPlaneName(val){
            this.$emit('updatePName',val)
        },
        myPlanePrice(val){
            this.$emit('updatePPrice',val)
        }
    }
}

2、父組件
父組件可以通過(guò)綁定屬性缤削，將數(shù)據(jù)傳給子組件窘哈。
父組件通過(guò)綁定自定義事件，更新數(shù)據(jù)亭敢。

  <div id="app">
    <h2>{{title}}</h2>
    <p>汽車(chē)信息：{{car}}</p>
    <p>飛機(jī)信息：{{planeName}}-{{planePrice}}</p>>
    <Child :car="car" :planeName="planeName" :planePrice="planePrice"
    @updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
  </div>

import Child from './components/Child.vue'
export default {
  // name選項(xiàng)定義組件的名稱(chēng)
  name: 'App',
  // data選項(xiàng)定義組件的數(shù)據(jù)
  data() {
    return {
      //定義一輛車(chē)的信息
      car:{
        name:'奔馳',
        price:'50W'
      },
      //飛機(jī)信息
      planeName:'波音747',
      planePrice:'10Y'
    }
  },
  components:{
    Child
  }
}

四滚婉、Element-UI
1、安裝

npm i element-ui -S

2吨拗、導(dǎo)入

// 導(dǎo)入element-ui組件庫(kù)
import ElementUI from 'element-ui';
// 導(dǎo)入element-ui組件庫(kù)的樣式
import 'element-ui/lib/theme-chalk/index.css';
// 注意：element-ui組件庫(kù)满哪，是一個(gè)插件，所有的插件都要由Vue去use
Vue.use(ElementUI);

2劝篷、使用

<template>
  <div class="el">
    <h3>Element-UI組件庫(kù)</h3>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "Element"
};
</script>
<style>
.el {
  border: green solid 1px;
  padding: 10px;
  margin-top: 10px;
}
</style>