一、初始Vue-Cli
Vue CLI是一个基于 Vue.js 进行快速开发的完整系统。
1、安装
全局安装Vue-Cli

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

查看版本号

vue --version

升级

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

2、创建项目
安装完成后，创建项目。项目名为demo

vue create demo

执行完成后会自动生成项目的基本结构

image.png

二、创建组件
1、单文件组件
单文件组件：把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾，这个文件就是单文件组件。xxx.vue是vue的单文件组件。
每个vue的单文件组件由三个部分组成：template里面放置模板内容，script里面放置js代码，style里面放置样式。

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

2、使用组件的步骤
（1）导入组件

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

（2）注册组件

export default {
  // name选项定义组件的名称
  name: 'App',
  components:{
    Child
  }
}

（3）使用组件

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

三、父子组件之间传值
1、子组件
子组件通过props定义属性，接收父组件传过来的数据。

props中定义的属性是只读、不可修改的，不过可以在data中对父组件传递过来的值进行中转，修改data中的数据。如果属性是一个对象，可以通过 obj.属性名 修改对象的属性值。
子组件通过$emit()触发自定义事件，将最新的数据作为事件对象传回去。

    <div class="child">
        <h3>{{title}}</h3>
        <hr>
        <p>车名：<input type="text" v-model="car.name"></p>
        <p>车价：<input type="text" v-model="car.price"></p>
        <hr>
        <p>飞机名称：<input type="text" v-model="myPlaneName"></p>
        <p>飞机价格：<input type="text" v-model="myPlanePrice"></p>
    </div>

// 每个组件，其实就是一个导出的对象
export default {
    name:'Child',
    props:['car','planeName','planePrice'],
    // 注意：组件里面的data一定要是一个方法，由方法返回一个对象
    data() {
        return {
            title:'我是Child组件',
            // 中转父组件传递过来的值
            myPlaneName : this.planeName,
            myPlanePrice : this.planePrice
        }
    },
    watch:{
        myPlaneName(val){
            this.$emit('updatePName',val)
        },
        myPlanePrice(val){
            this.$emit('updatePPrice',val)
        }
    }
}

2、父组件
父组件可以通过绑定属性，将数据传给子组件。
父组件通过绑定自定义事件，更新数据。

  <div id="app">
    <h2>{{title}}</h2>
    <p>汽车信息：{{car}}</p>
    <p>飞机信息：{{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选项定义组件的名称
  name: 'App',
  // data选项定义组件的数据
  data() {
    return {
      //定义一辆车的信息
      car:{
        name:'奔驰',
        price:'50W'
      },
      //飞机信息
      planeName:'波音747',
      planePrice:'10Y'
    }
  },
  components:{
    Child
  }
}

四、Element-UI
1、安装

npm i element-ui -S

2、导入

// 导入element-ui组件库
import ElementUI from 'element-ui';
// 导入element-ui组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 注意：element-ui组件库，是一个插件，所有的插件都要由Vue去use
Vue.use(ElementUI);

2、使用

<template>
  <div class="el">
    <h3>Element-UI组件库</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>