Vue开发实例（三）项目引入Element-UI

项目引入Element-UI

一、引入Element-UI
二、注册组件
- 1、vue2使用element-ui
- 2、vue3使用element-ui
三、使用Element组件
- 1、轻微改造
- 2、验证element是否生效

一、引入Element-UI

vue 复制代码

npm i element-ui --save
npm install element-ui -S

等待安装完成

二、注册组件

1、vue2使用element-ui

在main.js中注册

vue 复制代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Vue3不是这种语法，请注意
Vue.use(ElementUI);

vue2全部main.js代码

vue 复制代码

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进行了支持。

vue 复制代码

npm install element-plus --save

vue3 在main.js注册element-plus

注意这里与Vue2的注册有些不一样，比如：

vue 复制代码

const app = createApp(App);

先创建app 在用 use

vue 复制代码

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

vue 复制代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
</style>

这样代码看上去比较简单，干净

2、验证element是否生效

vue 复制代码

<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注册成功了