Vue 使用pnpm建立Vue + PrimeVue練習專案

使用pnpm建立練習用的Vue專案。

環境

• Windows 11

事前要求

Windows 11 安裝nvm。

安裝好pnpm。

建立Vue專案

在cmd命令列輸入pnpm create vue@latest。範例專案名稱為"vue-demo"，使用TypeScript、Router、Pinia（狀態管理）、Linter（錯誤檢查）和Prettier（程式碼格式）。

C:\..>pnpm create vue@latest
┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  vue-demo
│
◇  Use TypeScript?
│  Yes
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  Router (SPA development), Pinia (state management), Linter (error prevention), Prettier (code formatting)
│
◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  none
│
◇  Skip all example code and start with a blank Vue project?
│  No

Scaffolding project in C:\..\vue-demo...
│
└  Done. Now run:

   cd vue-demo
   pnpm install
   pnpm format
   pnpm dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

安裝套件

將cmd工作目錄移到已建立的Vue專案目錄，然後輸入pnpm install（或pnpm i），根據package.json（以及pnpm-lock.yaml）下載專案所需套件並安裝到本機。

C:\..\vue-demo>pnpm install
Packages: +295
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 344, reused 301, downloaded 0, added 295, done

dependencies:
+ pinia 3.0.4
+ vue 3.5.39
+ vue-router 5.1.0

devDependencies:
+ @tsconfig/node24 24.0.4
+ @types/node 24.13.2 (26.1.0 is available)
+ @vitejs/plugin-vue 6.0.7
+ @vue/eslint-config-typescript 14.9.0
+ @vue/tsconfig 0.9.1
+ eslint 10.6.0
+ eslint-config-prettier 10.1.8
+ eslint-plugin-oxlint 1.69.0 (1.72.0 is available)
+ eslint-plugin-vue 10.9.2
+ jiti 2.7.0
+ npm-run-all2 9.0.2
+ oxlint 1.69.0 (1.72.0 is available)
+ prettier 3.8.4 (3.9.4 is available)
+ typescript 6.0.3
+ vite 8.1.3
+ vite-plugin-vue-devtools 8.1.5
+ vue-eslint-parser 10.4.1
+ vue-tsc 3.3.6

Done in 7.6s using pnpm v11.10.0

安裝axios

axios是基於Promise的HTTP client工具。

在專案根目錄下輸入pmpm add axios，安裝axios套件。

C:\..\vue-demo>pnpm add axios
✓ Lockfile passes supply-chain policies (verified 5m ago)
Packages: +25
+++++++++++++++++++++++++
Progress: resolved 369, reused 326, downloaded 0, added 25, done

dependencies:
+ axios 1.18.1

Done in 8.2s using pnpm v11.10.0

啟動Vue

在專案根目錄下輸入pmpm dev啟動Vue專案。

C:\..\vue-demo>pnpm dev
  VITE v8.1.3  ready in 1597 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

在瀏覽器開啟http://localhost:5173/可看到預設頁面。

按鍵盤[Ctrl] + [C]離開。

安裝PrimeVue

PrimeVue是Vue的UI元件庫，也就是許多刻好樣式的常用頁面元件像是按紐Button、Checkbox、InputText、DataTable等。

在專案根目錄下輸入pnpm add primevue @primeuix/themes安裝PrimeVue套件。

C:\..\vue-demo>pnpm add primevue @primeuix/themes
✓ Lockfile passes supply-chain policies (verified 10m ago)
Packages: +7
+++++++
Progress: resolved 376, reused 333, downloaded 0, added 7, done

dependencies:
+ @primeuix/themes 2.0.3
+ primevue 4.5.5

Done in 9.5s using pnpm v11.10.0

配置PriveVue Plugin與主題

編輯器打開src/main.ts，加入以下設定。

app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

修改後如下。

src/main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

app.mount('#app')

安裝PriveVue自動匯入

完成後可直接在.vue檔中使用PrimeVue元件，不需手動撰寫import。

在專案根目錄下輸入pnpm add -D unplugin-vue-components @primevue/auto-import-resolver安裝兩個工具為unplugin-vue-components和@primevue/auto-import-resolver。

C:\..\vue-demo>pnpm add -D unplugin-vue-components @primevue/auto-import-resolver
✓ Lockfile passes supply-chain policies (verified 26m ago)
Packages: +3
+++
Progress: resolved 379, reused 336, downloaded 0, added 3, done

devDependencies:
+ @primevue/auto-import-resolver 4.5.5
+ unplugin-vue-components 32.1.0

Done in 4.8s using pnpm v11.10.0

修改vite.config.ts，在plugins加入Components[{resolvers: [PrimeVueResolver()]}]。

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import Components from 'unplugin-vue-components/vite';
import { PrimeVueResolver } from '@primevue/auto-import-resolver';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    Components({
      resolvers: [PrimeVueResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

設定好後，就可以在任何.vue檔案中直接使用<Button/>或<InputText/>，系統會自動幫你載入。