Vue CLI(1)——初始Vue-Cli & 创建组件 & Element-UI使用

一、初始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里面放置样式。

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

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

（2）注册组件

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

（3）使用组件

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

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

    

        
{{title}}
        

        
车名：
        
车价：
        

        
飞机名称：
        
飞机价格：
    

// 每个组件，其实就是一个导出的对象
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、父组件
父组件可以通过绑定属性，将数据传给子组件。
父组件通过绑定自定义事件，更新数据。

  

    
{{title}}
    
汽车信息：{{car}}
    
飞机信息：{{planeName}}-{{planePrice}}
>
    
  

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、使用