首先安装 脚手架 搭建一个 vue3 的项目,这里不做步骤说明。

其次 在项目中 引入elementUI
element兼容vue3的时候换成 element-plus 执行 :

npm install element-plus --save

package.json 中 可以看到

"dependencies": {
    "core-js": "^3.6.5",
    "element-plus": "^1.1.0-beta.24",
    "element-ui": "^2.15.6",
    "vue": "^3.0.0",
    "vuex": "^4.0.2"
  },

然后在 main.js 中配置

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')

然后就可以在项目中正常使用 elementUI了。

这里需要注意的

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

这样引入 会报错 :
This dependency was not found: * element-plus/lib/theme-chalk/index.css in ./src/main.js To install it, you can run: npm install --save element-plus/lib/theme-chalk/index.css

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐