关于Vue使用element-ui组件时页面中无显示的问题及解决方法之一

关于Vue使用element-ui组件时页面中无显示的问题及解决方法之一

错误示例：以el-input输入框为例

浏览器页面中无输入框显示

解决方法：
一.在项目目录下的package.json文件中找到dependencies,查看当前项目Vue的版本

“dependencies”: {
“core-js”: “^3.8.3”,
“element-plus”: “^2.4.1”,
“element-ui”: “^2.15.14”,
“vue”: “^3.2.13”,//当前项目下Vue的版本为Vue3(2.xxx为Vue2 ；3.xxx为Vue3)
“vuex”: “^4.0.2”
},

1.1 如果为Vue2，选择下载使用element-ui，在控制终端Terminal中输入以下命令：

npm i element-ui -S

然后在 main.js 中写入以下内容：

import Vue from ‘vue’;
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;
Vue.use(ElementUI);
new Vue({
el: ‘#app’,
render: h => h(App)
});

重新启动项目即可，详情请移步Element-UI官网

1.2 如果为Vue3，选择下载使用element-plus，在控制终端Terminal中输入以下命令：

npm install element-plus --save

然后在 main.js 中写入以下内容：

import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
import App from ‘./App.vue’
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app’)

重新启动项目即可，详情请移步Element-Plus官网

el-input输入框正常显示：