一、安装

1. element plus组件库：npm install element-plus --save

二、全局使用国际化(中文)

1. 在App.vue根组件中导入
    <template>
      <el-config-provider :locale="zhCn">
        <router-view />
      </el-config-provider>
    </template>

    <script setup>
        import { ElConfigProvider } from "element-plus"
        import zhCn from "element-plus/lib/locale/lang/zh-cn"
    </script>

三、按需加载组件方式一

 1. 新建目录utils/element.js
        import { ElButton,ElTabs,ElInput,ElForm,ElDatePicker} from 'element-plus'
        import 'element-plus/dist/index.css'
        const components = [
          ElButton,ElTabs,ElInput,ElForm,ElDatePicker
        ]
        export default (Vue) => {
          components.forEach(item => {
            Vue.use(item)
          })
        }
        
 2. main.js中配置
        import {createApp} from 'vue'
        import initElement from '@/utils/element plus'
        const app = createApp(App)
        initElement(app)

四、按需加载组件方式二(vue-cli)

 1. 安装按需导入插件：npm install -D unplugin-vue-components unplugin-auto-import  
 
 2. vue.config.js中配置
        const {defineConfig} = require('@vue/cli-service')
        const AutoImport = require('unplugin-auto-import/webpack')
        const Components = require('unplugin-vue-components/webpack')
        const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

        module.exports = defineConfig({
          transpileDependencies: true,
          assetsDir: 'static', //打包存放目录地方
          configureWebpack: config => {
            config.plugins.push(AutoImport({
              resolvers: [ElementPlusResolver()],
            }))
            config.plugins.push(Components({
              resolvers: [ElementPlusResolver()],
            }))
            // if (process.env.NODE_ENV === 'production') {
            //   // 为生产环境修改配置...
            // } else {
            //   // 为开发环境修改配置...
            // }
          },
          chainWebpack: (config) =>{
            // 修复HMR（热更新）
            config.resolve.symlinks(true);
          }
        })

五、vue.config.js代理

 devServer: {
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:7001', //接口域名
            changeOrigin: true,             //是否跨域
            ws: true,                       //是否代理 websockets
            secure: true,                   //是否https接口
            pathRewrite: {                  //路径重置
                '^/api': ''
            }
        }
    }
}