二、Vue3与element-ui插件集成

1、安装element-ui

npm install element-plus --save

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

2、添加按钮小图标

npm i @element-plus/icons-vue

如果引入的时候，出现错误，tsconfig.json文件中，修改：

"moduleResolution" 设置为 "node"

3、引入国际化会

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

如出现以下问题：

Could not find a declaration file for module 'element-plus/dist/locale/zh-cn.mjs'. 'E:/个人/vue3-template/vite-v3temp/node_modules/element-plus/dist/locale/zh-cn.mjs' implicitly has an 'any' type.
  If the 'element-plus' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'element-plus/dist/locale/zh-cn.mjs';`

解决办法是在//@ts-ignore

//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

4、src别名的配置

TypeScript编译配置：tsconfig.json

 "compilerOptions": {
 "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    }
}

vite.config.ts配置

可能需要安装

//vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

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

如果path报错的话，需要安装：npm install @types/node

4、添加几个环境测试

.env.development、.env.production、.env.test

模板

# 变量必须以VITE_为前缀暴露给外部读取
NODE_ENV='dev'
VITE_APP_TITLE="开发环境"
VITE_APP_BASE_API="/dev-api"
VITE_SERVER_URL="http://localhost:3001"

最后在package.json文件中添加

  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "build:test": "vue-tec&&vite build --mode test",
    "build:pro": "vue-tsc&&vite build --mode production"
  },

通过import.meta.env获取环境变量

5、SVG图标配置

svg对应矢量图，比img图标小，几乎不怎么占用资源，安装依赖插件

npm i vite-plugin-svg-icons -D

配置文件修改vite.config.ts

src/assets/icons

在main.ts文件添加配置

//svg插件需要配置代码
import 'virtual:svg-icons-register';

还需要在文件中创建src/assets/icons，icons文件夹，需要创建的图标都可以写在里面，比如：phone.svg,把图标代码复制上去iconfont-阿里巴巴矢量图标库

在项目中引用：

6、自定义插件，将全局组件打包注册

在components文件夹下，新建index.ts

//引入项目中全部的组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'

//全局对象
const allGloablComponents = { SvgIcon, Pagination };

//对外暴露插件对象
export default{
    //务必要做install方法
    install(app){
        Object.keys(allGloablComponents).forEach(key=>{
            app.component(key,allGloablComponents[key])
        })
    }
}

然后在到main.ts文件中注册

//引入自定义插件对象：注册整个项目全局组件
import registerGlobComp from '@/components';

createApp(App)
  .use(ElementPlus)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .use(registerGlobComp)
  .mount('#app');

6、安装全局style样式

在src/style/index.sass ,新建文件index.sass,

npm官网下载：npm | Home

reset.scss 文件，进行复制

在vite.config.ts文件中添加该配置，并在对应的文件下创建variables.scss，务必是这个文件，对应的全局变量

css: {
    preprocessorOptions: {
      scss:{
        javascriptEnabled: true,
        additionalData: `@import "@/styles/variables.scss";`
      }
      }
    }