vue3项目搭建连载文章(2)-集成ElementUI

背景说明

ElementUI是由饿了么推出的前端组件库， 因其清爽的设计风格。 受到广泛的应用。这里记录一下vue3框架如何整合ElementUI 以提升开发效率。

element-plus网址

安装步骤

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

npm install element-plus --save

安装完成之后打开package.json

{
  "name": "cron-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    //这个就是安装之后的显示效果
    "element-plus": "^2.2.32",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.0"
  }
}

main.js配置

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

// "element-plus": "^2.2.32", 
import locale from 'element-plus/lib/locale/lang/zh-cn'
// "element-plus": "^2.4.1", 会出现红色报错。 解决办法在vite-env.d.ts文件中
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

createApp(App).use(ElementPlus,{ locale }).mount('#app')

在vite-env.d.ts文件中

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const vueComponent: DefineComponent<{}, {}, any>;
  export default vueComponent;
}
 
declare module 'element-plus/dist/locale/zh-cn.mjs';

以上代码解决，element-plus中引入语言的异常。 原因是ts没有办法识别ts

制作自定义组件

我们以城市下拉作为自己的demo样例。

<template>
  <div class="Select">
    <el-select v-model="value" filterable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
 
export default defineComponent({
  name: "Select",
  props: {},
  setup() {
    const value = ref("");
    const options = [
      {
        value: "上海市",
        label: "上海市",
      },
      {
        value: "杭州市",
        label: "杭州市",
      },
      {
        value: "北京市",
        label: "北京市",
      },
      {
        value: "天津市",
        label: "天津市",
      },
      {
        value: "重庆市",
        label: "重庆市",
      },
    ];
    return {
      value,
      options,
    };
  },
});
</script>

引用代码, App.Vue将组件进行使用。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import CitySelect from './components/CitySelect.vue'
</script>

<template>

  <CitySelect></CitySelect>
</template>

展示效果