vue项目使用和ElementUI项目安装使用

            【项目启动】
1，项目启动要在项目的路径上输入cmd回车  运行代码： npm run dev
2, 打开浏览器测试效果

        【Vue项目的使用】
–1,概述
src文件夹: 写自己的业务
src/components文件夹: 定义组件
src/router文件夹: 定义路由
src/App.vue文件: 注册组件
src/main.js文件: 入口js文件
index.html: 作为项目的主页

          【自定义组件】
新建Car.vue文件(放在src/components文件夹里)
<template> <!-- 1.写 HTML代码 -->
  <h1>{{msg}}</h1>
</template>
 <script> /* 2.写js代码 */
       export default{//可导出的自定义组件
        name : 'Car',
        data() {   //准备数据
         return {
        msg:'Hello Vue!!!'
      }
    }
  }
</script>
<style> /* 3.写css代码*/
</style>

<template>
  <div id="app">
      <!-- 4. 使用自定义组件,其实就当做HTML标签用就行了-->
      <Car></Car>
  </div>
</template>

       【修改App.vue文件(注册组件)】
<script>
//1,导入自定义组件 Car.vue
//Car 是指 Car.vue里面的name属性的值
// ./components/Car.vue 是指 自定义组件的路径(必须以./开始)
import Car from './components/Car.vue'
export default {
  name: 'App',
  //2,注入组件(类似于局部组件的语法)
  components:{
    Car  //3,使用了第一步的名字
  }
}
</script>

           【ElementUI项目安装】
–1,概述
是一套漂亮的网页,有各种元素,直接用现成 代码
https://element.eleme.io
–2,安装
1, 进入你的项目目录中( E:\workspace\vue\jt01 )
2, 执行安装命令 npm i element-ui -D

              【修改main.js】
>.在src目录里main。js文件里添加下载好的elementui css
1.import ElementUI from 'element-ui'; //导入下载好的elementui
2.import 'element-ui/lib/theme-chalk/index.css';//导入下载好的elementui css
3.Vue.use(ElementUI); //使用elementui
4.Vue.config.productionTip = false

            【修改Car.vue组件文件】
<template> <!-- 1.写 HTML代码 -->
  <div> <!-- 组件只能有一个根元素-->
    <!-- 开始使用elementui的组件,本质上就是一些标签 -->
    <!-- 2.icon图标,,使用i组件,class的值是 图标名称 -->
     <i class="el-icon-edit"></i>

 <!-- 1.layout布局,默认一行是24个分格 el-row是行 el-col是列-->
    <el-row>
      <el-col :span="3">品牌</el-col>
     </el-row>

 <!-- 3.按钮el-button组件-->
     <el-row>
 <el-button type="danger" round>普通按钮</el-button> <!-- 圆角-->
 <el-button type="danger" circle icon="el-icon-edit"></el-button> <!-- 圆形带图 标-->
    </el-row>

    <!-- 4.输入框 el-input,添加属性实现输入效果v-model
      clearable可清空的输入框   show-password密码隐藏效果 :disabled="true"禁用状态
    -->
    <el-input placeholder="输入姓名" v-model="msg" clearable show-password></el-input>
    <el-input placeholder="输入姓名" :disabled="true"></el-input>

    <!-- 5.表格标签
      el-table表示表格,el-table-column表示表格项,label是列名,
      :data用来获取arr的数据 ,prop用来获取指定属性的值
    -->
   <el-table :data="arr">
      <el-table-column label="编号" prop="调用的属性值"></el-table-column>
      <el-table-column label="更多">
 <!-- 圆形按钮 ,icon设置图标 ,type设置颜色 -->
          <el-button circle icon="el-icon-edit" type="danger"></el-button>
      </el-table-column>
    </el-table>

   <!-- 6.表单标签 -->
<el-form>
        <el-form-item label="标题: ">
            <el-input placeholder="请输入..." v-model="item.name"></el-input>
        </el-form-item>
</el-form>
</div>
</template>
<script> /* 2.写js代码 */
  //可导出的自定义组件
  export default{
    name : 'Car',
    data() {   //准备数据
      return {
        msg:'Hello Vue!!!',
        arr:[  //为表格准备数据
          {
            id : 1,
            pinpai : '鸿星尔克',
            desc : 'to be no.1',
            price : 999
          },
          {
            id : 2,
            pinpai : '特步',
            desc : '飞一样的感觉',
            price : 666
          }
        ],
 item:{ //为表单准备数据  name : '测试标题',sellpoint : '测试卖点', price : 99,desc : '测试详情'
        }
      }
    },
    methods:{ //写方法
      save(){
          alert("保存成功!");
      }
    }
  }
</script>
<style> /* 3.写css代码*/
</style>

                     【总结】
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属性获取表单数据