项目引入Element-UI
- 一、引入Element-UI
- 二、注册组件
- 1、vue2使用element-ui
- 2、vue3使用element-ui
- 三、使用Element组件
- 1、轻微改造
- 2、验证element是否生效
一、引入Element-UI
npm i element-ui --save
npm install element-ui -S
等待安装完成
二、注册组件
1、vue2使用element-ui
在main.js中注册
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Vue3不是这种语法,请注意
Vue.use(ElementUI);
vue2全部main.js代码
import Vue from 'vue'
import App from './App.vue'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false
Vue.use(ElementUI);new Vue({render: h => h(App),
}).$mount('#app')
注意:在使用Vue3全局注册element的时候,发现错误如下:
Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype’)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/types.js:39)
at Object…/node_modules/element-ui/lib/utils/types.js (chunk-vendors.js:2923)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/util.js:19)
at Object…/node_modules/element-ui/lib/utils/util.js (chunk-vendors.js:2935)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/locale/format.js:49)
at Object…/node_modules/element-ui/lib/locale/format.js (chunk-vendors.js:2526)
那么如何解决呢,继续往下看…
2、vue3使用element-ui
vue3中使用element-plus,它对Vue3进行了支持。
npm install element-plus --save
vue3 在main.js注册element-plus
注意这里与Vue2的注册有些不一样,比如:
const app = createApp(App);
先创建app 在用 use
import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus);app.mount('#app')
三、使用Element组件
1、轻微改造
启动项目,正常显示即代表项目运行正常
改造项目代码
位置:HelloWorld.vue
<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
</style>
这样代码看上去比较简单,干净
2、验证element是否生效
<template><div class="hello"><h1>{{ msg }}</h1><el-button>这是一个按钮</el-button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
</style>
从上面的页面可以看到,element注册成功了