VUE3项目学习系列--项目集成（三）

一、element-plus集成

 1、安装依赖

Element-plus官网：

快速开始 | Element Plus (element-plus.org)

pnpm i element-plus

在项目main.ts中引入element-plus:

import { createApp } from "vue";
import App from "./App.vue";
// 从Element官网上参考，引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

// 挂载到应用上
app.use(ElementPlus)
app.mount('#app')

在app.vue中使用element-plus:

<script setup lang="ts">
</script>

<template>
  <div>
    <!-- element-plus按钮 -->
    <el-button type="primary" size="de">测试</el-button>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
   <h1>VUE3</h1>
  </div>
</template>

<style scoped>

</style>

运行启动项目：pnpm run dev

 2、安装element 图标库

pnpm i @element-plus/icons-vue

在app.vue页面中使用图标：先引入图标Plus，再在控件按钮中使用图标：icon="Plus"

<script setup lang="ts">
  // 引入图标
  import {Plus} from "@element-plus/icons-vue"
</script>

<template>
  <div>
    <!-- element-plus按钮 -->
    <el-button type="primary" size="de" :icon="Plus">测试</el-button>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
   <h1>VUE3</h1>
  </div>
</template>

<style scoped>

</style>

 3、element-plus 国际化

由于element-plus模式显示的英文，在使用控件过程中要求显示中文需要在main.ts如下配置

import { createApp } from "vue";
import App from "./App.vue";
// 从Element官网上参考，引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 配置element-plus国际化
//@ts-ignore --忽略ts校验
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const app = createApp(App)

app.use(ElementPlus, {
    locale: zhCn,
  })
// 挂载到应用上
app.use(ElementPlus)
app.mount('#app')

需要注意的是：'element-plus/dist/locale/zh-cn.mjs'引入后会报红，是由于ts校验检测导致的，通过添加：//@ts-ignore   可忽略ts检测

二、src别名配置

      在开发项目中文件之间关系复杂，需要给src进行别名配置，便于在文件引用过程中区分路径，具体配置如下：

1、在vite.config.js中添加如下代码：

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': path.resolve('./src') } },
})

2、在tsconfig.json中添加如下代码：

  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": {
      //路径映射，相对于baseUrl
      "@/*": ["src/*"]
    },
   }

3、使用

在src下的components下创建文件test.vue，

<template>
  <div>
      <h1>测试@别名</h1>
  </div>
</template>

<script>

</script>

<style scoped>

</style>

在App.vue中引用如下所示：import test from "@/components/test.vue"

<script setup lang="ts">
  // 引入图标
  import {Plus} from "@element-plus/icons-vue"
  import test from "@/components/test.vue"
</script>

<template>
  <div>
    <!-- element-plus按钮 -->
    <el-button type="primary" size="de" :icon="Plus">测试</el-button>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
   <h1>VUE3</h1>
   //显示test组件内容
   <test></test>
  </div>
</template>

<style scoped>

</style>

结果：