Element-Ui 在vue中的使用大全

Element-Ui 在vue中的使用大全

导入 添加安装插件

npm install element-plus --save

全局引入element-plus

main.js 中全局注册，这种方式引入后，在全局中使用都不需要 import 就可以直接使用 import ElementPlus from ‘element-plus’ import ‘element-plus/dist/index.css’

报错

App_vue__WEBPACK_IMPORTED_MODULE_5_.default.use is not a function

在app 挂载哪里要注意写法

import {
          
    createApp } from vue
import App from ./App.vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import router from "./router/router";

const  app = createApp(App);
app.use(ElementPlus);
app.use(router);

app.mount(#app)

vue3的slot插槽用法，slot-scope are deprecated

每个ui都有对应的官网说明 ， 和bootstrap类似的

https://element-plus.gitee.io/zh-CN/resource/index.html

使用时报错 Module parse failed: Unexpected token (31:27)

File was processed with these loaders:

./node_modules/vue-loader-v16/dist/templateLoader.js ./node_modules/cache-loader/dist/cjs.js ./node_modules/vue-loader-v16/dist/index.js You may need an additional loader to handle the result of these loaders. 如果你使用的是vue3.0 就不要添加vue-loader，因为vue3.0有自己的loader 造成这个的原因是添加了lang=‘ts’，你需要添加typescript和ts-loader，

j { test: /.ts$/, loader: ts-loader, options: { appendTsSuffixTo: [/.vue$/] } }