vue3：简单介绍使用element ui的方法应用

vue3：简单介绍使用element ui的方法应用。

element-ui支持vue2版本，当用vue3安装element-ui的时候会报错，这就需要安装element-plus版本来用到vue3项目中。

element-ui网址：https://element.eleme.cn/#/zh-CN/

element-plus网址：https://element-plus.gitee.io/zh-CN/

首先安装element-plus

1. npm install element–plus —save

可以在package.json中检查是否安装成功。

修改main.js或main.ts文件

1. import { createApp } from “vue”;
2. import App from “./App.vue”;
3. import router from “./router”;
4. import store from “./store”;
5. import ElementPlus from ‘element-plus’;
6. import ‘element-plus/theme-chalk/index.css’;
7.  
8. import locale from ‘element-plus/lib/locale/lang/zh-cn’
9. createApp(App).use(store).use(router).use(scroll).use(ElementPlus, { locale }).mount(“#app”);

然后在代码中使用

1. <template>
2.   <div class=“Select”>
3.     <el-select v-model=“value” filterable placeholder=“请选择”>
4.       <el-option
5.         v-for=“item in options”
6.         :key=“item.value”
7.         :label=“item.label”
8.         :value=“item.value”
9.       />
10.     </el-select>
11.   </div>
12. </template>

JS

1. <script>
2. import { defineComponent, ref } from “vue”;
3.  
4. export default defineComponent({
5.   name: “Select”,
6.   props: {},
7.   setup() {
8.     const value = ref(“”);
9.     const options = [
10.       {
11.         value: “上海市”,
12.         label: “上海市”,
13.       },
14.       {
15.         value: “杭州市”,
16.         label: “杭州市”,
17.       },
18.       {
19.         value: “北京市”,
20.         label: “北京市”,
21.       },
22.       {
23.         value: “天津市”,
24.         label: “天津市”,
25.       },
26.       {
27.         value: “重庆市”,
28.         label: “重庆市”,
29.       },
30.     ];
31.     return {
32.       value,
33.       options,
34.     };
35.   },
36. });
37. </script>

有的会出现报错，那就再安装一下element ui

1. npm install element–ui –S

补充：新引入Element Plus

npm install element-plus –save

main.js中引入

1. import { createApp } from ‘vue’
2. import App from ‘./App.vue’
3. import router from ‘./router’
4. import store from ‘./store’
5. // import ‘@/assets/scss/reset.scss’
6.  
7. import ElementUI from ‘element-plus’
8. import ‘element-plus/lib/theme-chalk/index.css’
9.  
10. createApp(App).use(store).use(router).use(ElementUI).mount(‘#app’)

启动后，项目能正常显示。