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$/] } }