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>
相关推荐
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
YGY Webgis糕手之路19 小时前
Cesium 快速入门(三)Viewer:三维场景的“外壳”
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路21 小时前
Cesium 快速入门(二)底图更换
前端·经验分享·笔记·vue
YGY Webgis糕手之路1 天前
Cesium 快速入门(七)材质详解
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路1 天前
Cesium 快速入门(八)Primitive(图元)系统深度解析
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路1 天前
Cesium 快速入门(四)相机控制完全指南
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路1 天前
Cesium 快速入门(六)实体类型介绍
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路1 天前
Cesium 快速入门(一)快速搭建项目
前端·经验分享·笔记·vue·web
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes(3D背景盒子组件)
前端·javascript·vue.js·3d·vue
程序猿小D2 天前
基于SpringBoot+MyBatis+MySQL+VUE实现的便利店信息管理系统(附源码+数据库+毕业论文+远程部署)
数据库·spring boot·mysql·vue·mybatis·毕业论文·便利店信息管理系统