工程初始化

创建工程并启动

# 使用pnpm创建vite项目
pnpm create vite
√ Project name: ... jprime-vite-ui
√ Select a framework: » Vue
√ Select a variant: » TypeScript

cd jprime-vite-ui
# 安装项目依赖
pnpm i

# 启动
pnpm run dev

  VITE v5.3.4  ready in 1584 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

安装项目基本依赖

pnpm add vue-router

pnpm add pinia

安装primevue相关依赖

# prime vue插件
pnpm add primevue
# prime 图标插件
pnpm add primeicons 
# prime 本地化插件
pnpm add primelocale
# prime 主题插件
pnpm add @primevue/themes

安装开发环境依赖

# 为了自动导入vue组件
pnpm add unplugin-vue-components -D
pnpm add unplugin-auto-import/vite -D
# 为了自动导入primevue组件
pnpm add  @primevue/auto-import-resolver -D
# 为了使用setup语法糖直接命名组件名称
pnpm add vite-plugin-vue-setup-extend -D
# 为了使用 process.env
pnpm add @types/node -D

配置vite及应用

vite.config.ts

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
import Components from "unplugin-vue-components/vite";
// import AutoImport from "unplugin-auto-import/vite";
import { PrimeVueResolver } from "@primevue/auto-import-resolver";
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd());
  return {
    // 配置环境变量
    env: {
      VITE_APP_TITLE: "JPrime-Vite-UI",
      VITE_APP_ENV: env.VITE_APP_ENV,
      VITE_APP_API_URL: env.VITE_APP_API_URL || "http://localhost:8080",
    },
    // 配置src目录解析别名
    resolve: {
      alias: {
        "@": "src",
      },
    },
    // 配置服务器
    server: {
      port: 3000,
      open: true,
      proxy: {
        "/api": {
          target: env.VITE_APP_API_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
    // 配置插件
    plugins: [
      vue(), // 引入vue插件
      VueSetupExtend(), // 引入vite-plugin-vue-setup-extend插件
      Components({
        // 引入组件解析器插件
        resolvers: [
          // PrimeVue组件解析器
          PrimeVueResolver(),
        ],
        dts: "./src/components.d.ts", // 自动生成.d.ts文件
      }),
    ],
    // 配置构建
    build: {
      outDir: "dist", // 输出目录
      assetsDir: "assets", // 静态资源目录
      emptyOutDir: true, // 输出目录清空
      rollupOptions: {
        // 构建配置
        input: {
          main: "src/main.ts", // 入口文件
        },
      },
    },
  };
});

src/config/app.config.ts

export const LOCALE_ZH_CN = "zh-CN";
export const LOCALE_EN = "en";
export const LOCALE_SESSION_KEY = "lang";

export default {
  APP_TITLE: "JPrime Vite UI",
  LOCALE_SESSION_KEY,
  LOCALE_ZH_CN: LOCALE_ZH_CN,
  LOCALE_EN,
  defaultLocale: (): string => {
    return sessionStorage.getItem(LOCALE_SESSION_KEY) || LOCALE_ZH_CN;
  },
};

配置primevue

src/config/primevue.config.js

import PrimeVue from "primevue/config";
// 使用Aura主题
import Aura from "@primevue/themes/aura";
// PrimeVue本身仅支持英语，这里我们使用PrimeVue社区语言来进行国际化配置
import zhCN from "primelocale/zh-CN.json";
import en from "primelocale/en.json";

import appConfig from "./app.config";

// 获取当前语言，默认中文
const defaultLocale = appConfig.defaultLocale();

// 定义PrimeVue支持的语言包
export const primeVueLocalesMessages: any = {
  ...zhCN, // 简体中文
  ...en, // 英文
  // "zh-CN": zhCN["zh-CN"], // 简体中文
  // en: en["en"], // 英文
};

// 获取语言包
export const getLocaleMessages = (locale: string): any => {
  return (
    primeVueLocalesMessages[locale] || primeVueLocalesMessages[defaultLocale]
  );
};

// 定义PrimeVue预设配置
export const primeVuePresetConfig = {
  // 主题
  theme: {
    preset: Aura,
  },
  // 语言消息
  locale: getLocaleMessages(defaultLocale),
};

// 注册PrimeVue方法
export const setupPrimeVue = (app: any) => {
  app.use(PrimeVue, primeVuePresetConfig);
};

使用并测试Prime Vue UI

main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { setupPrimeVue } from "./config/primevue.config";

function loadApp() {
  const app = createApp(App);
  setupPrimeVue(app);
  app.mount("#app");
}

loadApp();

src/App.vue

<template>
  <div class="card flex flex-col gap-6 items-center justify-center">
    <Toast />
    <FileUpload
      ref="fileupload"
      mode="basic"
      name="demo[]"
      url="/api/upload"
      accept="image/*"
      :maxFileSize="1000000"
      @upload="onUpload"
    />
    <Button label="上传" @click="upload" severity="secondary" />
  </div>
  <div>
    <DataTable :value="products" tableStyle="min-width: 50rem">
      <template #header>
        <div style="text-align: left">
          <MultiSelect
            :modelValue="selectedColumns"
            :options="columns"
            optionLabel="header"
            @update:modelValue="onToggle"
            display="chip"
            placeholder="选择列"
          />
        </div>
      </template>
      <Column field="id" header="ID" />
      <Column
        v-for="(col, index) of selectedColumns"
        :field="col.field"
        :header="col.header"
        :key="col.field + '_' + index"
      ></Column>
    </DataTable>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import testData from "./data/test";
onMounted(() => {});

const columns = ref([
  { field: "name", header: "姓名" },
  { field: "company", header: "公司" },
]);
const selectedColumns = ref(columns.value);
const products = ref(testData.data);
const onToggle = (val: string[]) => {
  selectedColumns.value = columns.value.filter((col: any) => val.includes(col));
};
const fileupload = ref();

const upload = () => {
  fileupload.value.upload();
};

const onUpload = () => {
  console.log("onUpload");
};
</script>

页面访问

参考资料

• 开始 | Vite 官方中文文档 (vitejs.dev)

• Install PrimeVue with Vite