2021-08-09Vue脚手架 自定义组件 ElementUI使用

Vue脚手架安装

执行以下命令安装并检验

• C:\Users\Administrator>node -v
• C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org
• C:\Users\Administrator>npm config get registry
• C:\Users\Administrator>npm install vue-cli -g
• C:\Users\Administrator>vue -V
• C:\Users\Administrator>where vue

创建vue项目过程

1. 指定workspace：最好别放c盘
2. 在存放worksapce指定的位置：执行cmd回车，执行了命令
3. 初始化了一个vue项目：vue init webpack 项目名称 回车，正确的选择yes、no
4. 此时需要一定的时间去等待下载vue项目结构

自定义组件：

创建Car.vue组件（src/components里）<template>只能有一个跟级标签

<template>
  <h1>
    {{msg}}
  </h1>
</template>

<script>
  /* 支持导出的自定义组件*/
  export default{
    name : 'Car',
    data(){
      return{
        msg : "hello componets~~"
      }
    }
  }
</script>

<style>
</style>

修好App.vue文件

1. 导入自定义组件
2. 添加指定的组件
3. 使用自定义组件，本质就是一个标签

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Car></Car><!-- 使用自定义组件 -->
  </div>
</template>
<script>
  //导入自定义组件+./
 import Car from './components/Car.vue'
 export default {
  name: 'App',
  components:{//添加自定义组件
    Car
  }
}
</script>

测试！！！

启动服务器: npm run dev
打开浏览器访问:http://localhost:8080

ElementUI 元素

第一步：npm i element-ui -S 下载安装

第二步，修改main.js,引入ElementUI

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'
Vue.use(ElementUI);
Vue.config.productionTip = false

测试修改Car.vue文件！~观察页面效果！

（参考Element丰富页面）

第一，展示图标。

   <i class="el-icon-phone"></i>
   <i class="el-icon-share"></i>
   <i class="el-icon-delete"></i>
   <i class="el-icon-delete-solid"></i>

第二，layout栅栏的效果

el-row一行，一行默认24列，el-col是一列，span可以自定义合并的列数！

<el-row>
      <el-col :span="12">韩云</el-col>
      <el-col :span="12">韩云</el-col>
    </el-row>
    <el-row>
      <el-col :span="8">hello</el-col>
      <el-col :span="8">hello</el-col>
      <el-col :span="8">hello</el-col>
    </el-row>

第三，按钮的效果

type修饰按钮的颜色！icon可以加图片！circle是一个圆形！

<el-button-group>
     <el-button type="primary" icon="el-icon-arrow-left" >上一页</el-button>
     <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
   </el-button-group>

第四，输入框的效果

placeholder是提示信息，v-model体现了双向绑定，clearable可清空，show-password密码输入框

<el-input placeholder="请输入用户名" v-model="msg" ></el-input>
    <el-input placeholder="请输入用户名" v-model="msg" show-password></el-input>
    <el-input placeholder="请输入用户名" v-model="msg" clearable></el-input>

 第五，table表格的效果

label是列名！表格里的数据放在data里，:data="要获取的数据" stripe实现斑马纹的表格显示

prop是要获取数据哪个属性的值

<el-table :data="arr" stripe>
   <el-table-column label="编号" prop="id"></el-table-column>
   <el-table-column label="姓名" prop="name"></el-table-column>
   <el-table-column label="年龄" prop="age"></el-table-column>
 </el-table>

//准备多个数据！！！

<script>
  export default{
    name:'Car',
    data(){
      return{
        msg:'Welcome to Your Vue.js App',
        arr : [
        {id:100,
        name:'hy',
        age:20,
        },
        {id:100,
        name:'hy',
        age:20,
        },
        {id:100,
        name:'hy',
        age:20,
        },
      ]
      }
    }
  }
</script>

测试如下图所示！！模仿Element代码！

 创建maven工程

1. File-New-Project-选中Maven-next-输入工程名和GroupId-Finish
2. 打开里面的pom.xml文件，添加jar包的位置，交给Maven进行下载
3. 必须进行刷新，否则不下载

 <!--  添加mysql依赖，可以支持多个依赖，依赖以坐标体现 -->
    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <!--要和数据库版本匹配,
            数据库是5.X的版本就添加5.X的依赖
            数据库是8.X的版本就添加8.X的依赖
            -->
            <version>5.1.48</version>
        </dependency>
    </dependencies>