vite2.x+vue3.x项目搭建四-element-plus篇

一、安装

 npm install element-plus --save
 or
 yarn add element-plus

 npm install unplugin-vue-components //vite.config.js用到，详细看element-plus官网

二、main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementPlus).mount('#app')

三、vite.config.js修改

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],

四、vite.config.js

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";
const path = require("path");

//开启gzip压缩
import viteCompression from "vite-plugin-compression";
//element-plus
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    //路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },

  css: {
    //css预处理 路径最后要加上;不然会报错
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/style.scss";',
      },
    },
  },
  //插件
  plugins: [
    vue(),
    viteCompression(),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],

  publicDir: "public",
  server: {
    hostname: "localhost", // 默认是 localhost
    port: "8001", // 默认是 3000 端口
    open: true, // 浏览器自动打开
    https: false, // 是否开启 https
    ssr: false, // 服务端渲染
    base: "./", // 生产环境下的公共路径
    outDir: "dist", // 打包构建输出路径，默认 dist ，如果路径存在，构建之前会被删除
    //反向代理
    proxy: {
      // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      "/api": {
        target: "http://test.*****.com", // 后端服务实际地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
    //限制为工作区 root 路径以外的文件的访问
    fs: {
      strict: false,
    },
  },

  //生产模式打包配置
  build: {
    outDir: "dist", //Specify the output directory (relative to project root).
    //这个用于打包。打包会出现大小限制
    chunkSizeWarningLimit:1500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});

小结：下一篇是vuex