目录

element-ui的组件使用

1. 安装 Element UI(在文件夹最上面输入cmd进入dos窗口,然后输入安装指令 npm install element-ui --save

2.在main**.** js文件全局引入(main**.** js文件负责 全局注册 ),在该文件注册的所有组件在其他文件都能直接调用,一般不需再次引入(对于自定义的组件,不论在main.js文件里是否全局引入,在router文件夹的index文件里面好像必须要重新写一遍组件导入,才能用)

javascript 复制代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

3.在views文件夹下创建文件index.vue(没有views文件夹就自己建一个)

javascript 复制代码
<template>
 
   <el-input  v-model="input" placeholder="请输入内容"></el-input>

  
</template>



<script>
export default {
  name: 'BookInfo', 
   data() {
    return {
      input: '' // 用于绑定输入框的值
    };
  } 
}
</script>




<style scoped>
 
</style>

4.在App.vue文件引入该组件(App.vue是程序入口界面,程序在执行时先执行main.js和App.vue文件)

javascript 复制代码
<template>
    <div id="app">
        <BookInfo></BookInfo>
    </div>
</template>

<script>
import BookInfo from './views/index'
    export default {
        name: 'App',
        components: {
          BookInfo
        }
    }
</script>

<style>
	#app{
		font-size:80px;
		color:red;
		text-align: center;
	}
</style>

5.执行结果

如果想让输入框小一些,就加个 style样式

javascript 复制代码
<el-input style="width: 200px;" v-model="input" placeholder="请输入内容"></el-input> 

6.注意:

正常情况下不会在App.vue文件直接引入某个组件,而是把动态路由引入,因为现在只写一个界面,就没有使用动态路由,实际生产必须改成动态路由。

只把第4步的第3行改成**<router-view/>**,就能用路由的方式(路径)引入很多界面

javascript 复制代码
<template>
    <div id="app">
        <router-view/>
    </div>
</template>
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
百锦再15 小时前
React编程高级主题:错误处理(Error Handling)
前端·javascript·react.js·前端框架·vue·web·angular
跟着珅聪学java2 天前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
杉之2 天前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
剑亦未配妥2 天前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
wuaro3 天前
RBAC权限控制具体实现
前端·javascript·vue
前端互助会4 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
YiHanXii6 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生6 天前
vueRouter的hash模式跟history的区别
vue
小阳生煎7 天前
Vue3当中el-tree树形控件使用
vue