三、day 13 vue项目的使用

1. 概述：

1. Src文件夹：写自己的业务
2. Src/components文件夹：定义组件
3. Src/router文件夹：定义路由
4. Src/App.vue文件：注册组件
5. Src/main.js:入口js文件
6. Index.Html:作为项目的主页

1. 自定义组件

1. 首先在template标签里，写html代码
2. 在script标签里写js代码
3. Export default{

  Name:”car”,

  Data(){

Return{返回的内容}

}

1. 修改APP.VUE文件（注册组件）

1. 在script导入自定义的组件 car.Vue
2. Import car from ‘./components/car.vue ’
3. Export default{

Name:”App”,

Components:{

car

}

}

1. 在template标签里写自己定义的组件

4,总结

1, 安装elementui

2, 修改main.js 引入elementui

3, 使用了各种组件(标签)

图标 : i 标签, 配置class属性,属性的值是图标的名字

布局: el-row标签表示行元素 el-col标签表示列元素 ,默认是一行有24分栏,:span属性可以自由组合

按钮: el-button标签表示按钮, type属性用来指定元素颜色,icon属性可以给按钮添加图标,round circle…

输入框: el-input标签是输入框, 必须指定v-model属性才能实现输入的效果

表格: el-table标签表示表格 , el-table-column表示表格里的列 , 通过:data属性获取数组里的数据, 通过label属性指定表格里的 表头, 通过prop属性绑定要获取的值

表单: el-form标签是表单,el-form-item表示表单项, 通过label属性指定表单项的名字,通过v-model属性获取表单数据