Vue3 PrimeVue 應用開發實戰1

1.PrimeVue簡介

PrimeVue 是一套非常優秀的 Vue UI 元件庫，支援 Vue 3 的 web UI 元件庫，元件豐富，定制性很強，官網文檔清晰，代碼例子充足，而且中文化也做得很不錯，是一款可用性很強的 Vue 元件庫。

PrimeVue 的技術特性：

元件豐富。内置 70 多個常用的元件，體驗優秀，使用簡單
主題豐富。内置大量主題，且提供強大的主題定制工具
高效開發模闆。由專業設計師設計并由 Vue 專家精心制作的精緻的 Vue-CLI 開發模闆
可通路性強。面向所有人的UI元件，全面支援 WCAG（Web内容可通路性指南）标準
PrimeVue 是一個與設計無關的庫，實作原理是将樣式分為 core 和 theme。core 駐留在 PrimeVue 内部，以實作群組件結構相關的效果，例如定位，而 theme 實作顔色，填充和邊距。
PrimeVue 提供各種免費開源的主題和進階主題，我們可以從各種主題中進行選擇，也可以使用官方提供 Theme Designer 工具輕松開發自己的主題。

PrimeVue文檔：

英文文檔：https://primefaces.org/primevue

中文文檔：http://www.primevue.top

中文文檔和英文文檔版本不一緻，建議以英文文檔為主，參照中文文檔，如果英文好的話就隻看英文文檔。

2.使用PrimeVue

使用PrimeVue，需要使用的主要内容包括：元件、圖示、布局系統，是以，需要安裝這三個部分，指令如下：

npm install primevue@^3.12.1 --save
npm install primeicons --save
npm install primeflex --save

下一步，設定PrimeVue配置：

import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue);

接下來，導入樣式單

primevue/resources/themes/saga-blue/theme.css       //theme
primevue/resources/primevue.min.css                 //core css
primeicons/primeicons.css                           //icons

如果需要使用布局系統，還需要導入：

primeflex/primeflex.css

main.js檔案完整内容：

import { createApp } from 'vue'
import App from './institution.vue'
import PrimeVue from 'primevue/config'
import 'primevue/resources/themes/bootstrap4-light-blue/theme.css'       //theme
import 'primevue/resources/primevue.min.css'                 //core css
import 'primeicons/primeicons.css'                          //icons
import 'primeflex/primeflex.scss'

const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

3.主題

PrimeVue提供了一些免費的主題供使用者使用，如下：

primevue/resources/themes/bootstrap4-light-blue/theme.css
primevue/resources/themes/bootstrap4-light-purple/theme.css
primevue/resources/themes/bootstrap4-dark-blue/theme.css
primevue/resources/themes/bootstrap4-dark-purple/theme.css
primevue/resources/themes/md-light-indigo/theme.css
primevue/resources/themes/md-light-deeppurple/theme.css
primevue/resources/themes/md-dark-indigo/theme.css
primevue/resources/themes/md-dark-deeppurple/theme.css
primevue/resources/themes/mdc-light-indigo/theme.css
primevue/resources/themes/mdc-light-deeppurple/theme.css
primevue/resources/themes/mdc-dark-indigo/theme.css
primevue/resources/themes/mdc-dark-deeppurple/theme.css
primevue/resources/themes/tailwind-light/theme.css
primevue/resources/themes/fluent-light/theme.css
primevue/resources/themes/lara-light-indigo/theme.css
primevue/resources/themes/lara-dark-indigo/theme.css
primevue/resources/themes/lara-light-purple/theme.css
primevue/resources/themes/lara-dark-purple/theme.css
primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
primevue/resources/themes/lara-light-teal/theme.css
primevue/resources/themes/lara-dark-teal/theme.css
primevue/resources/themes/saga-blue/theme.css
primevue/resources/themes/saga-green/theme.css
primevue/resources/themes/saga-orange/theme.css
primevue/resources/themes/saga-purple/theme.css
primevue/resources/themes/vela-blue/theme.css
primevue/resources/themes/vela-green/theme.css
primevue/resources/themes/vela-orange/theme.css
primevue/resources/themes/vela-purple/theme.css
primevue/resources/themes/arya-blue/theme.css
primevue/resources/themes/arya-green/theme.css
primevue/resources/themes/arya-orange/theme.css
primevue/resources/themes/arya-purple/theme.css
primevue/resources/themes/nova/theme.css
primevue/resources/themes/nova-alt/theme.css
primevue/resources/themes/nova-accent/theme.css
primevue/resources/themes/nova-vue/theme.css
primevue/resources/themes/luna-amber/theme.css
primevue/resources/themes/luna-blue/theme.css
primevue/resources/themes/luna-green/theme.css
primevue/resources/themes/luna-pink/theme.css
primevue/resources/themes/rhea/theme.css

我們可以根據自己的需要直接導入使用。

4.使用元件

按需導入：需要什麼元件導入什麼元件，可以在main.js檔案中導入後全局注冊，也可以在需要使用的元件中導入後局部注冊。

如，局部注冊如下：

<template>
    ......
    <Dialog></Dialog>
    ......
</template>
<script>
import Dialog from 'primevue/dialog'
......
export default {
    ......
    components: {
        Dialog
    }
    ......
}
</script>

5.開發實戰

實戰案例：實作一個子頁面架構。

所謂子頁面是指在單頁面開發中路由顯示的頁面，即<router-view/>中顯示的内容，或者是多頁面開發中在<div></div>或<iframe/>中顯示的頁面。為了統一風格，我們在實際開發中需要對子頁面進行一些規範，比如劃分區域，視窗大小等。

本節案例的子頁面按照背景管理系統的要求進行設計，即：

子頁面區域包括：

外邊框 - 指頁面外邊框。
标題欄 - 左側顯示标題，個别情況下右側顯示操作按鈕或者提示資訊等。
查詢欄 - 用于查詢資料設定條件，及頁面包含的操作，如增删改等。
資料欄 - 用于顯示資料，一般是表格。
表單對話框 - 用于在資料增加、修改時填寫表單。

整個子頁面設計中，可以固定高度的隻有标題欄，其他都有可能随着操作資料的不同而不同，是以外邊框應該是100%充滿顯示區域，查詢欄根據查詢内容的多少及操作按鈕的多少動态調整，剩餘的空間都給資料欄，是以資料欄需要滾動條，如果資料欄中是表格的話，資料在表格中上下滾動。

根據以上需求，各部分設計及樣式單分别如下：

5.1 外邊框

<div style="height: 100vh; padding: 6px;">
</div>

5.2标題欄

标題欄直接使用PrimeVue的Toolbar即可，代碼如下：

<Toolbar style="padding: 12px;">
    <template #start>
        <i class="pi pi-bars p-toolbar-separator mr-2" />
        <Tag value="标題"></Tag>
    </template>
    <template #end>
        <Button icon="pi pi-search" class="mr-2" />
        <Button icon="pi pi-calendar" class="p-button-success mr-2" />
        <Button icon="pi pi-times" class="p-button-danger" />
    </template>
</Toolbar>

5.3查詢欄

<div class="query-box">
      <div class="grid">
        <div class="col-3">
          <div class="query-field-title">查詢字段</div>
          <InputText type="text"/>
       </div>
       <div class="col-9" style="padding-top: 15px;">
          <Button type="button" label="查詢" icon="pi pi-search" style="margin-right: 12px;"/>
          <Button type="button" label="全部" icon="pi pi-search" style="margin-right: 12px;"/>
          <Button type="button" label="建立" icon="pi pi-plus" style="margin-right: 12px;"/>
          <Button type="button" label="編輯" icon="pi pi-pencil" style="margin-right: 12px;"/>
          <Button type="button" label="删除" icon="pi pi-times" style="margin-right: 12px;"/>
       </div>
     </div>
   </div>

查詢欄内部使用了PrimeFlex的Grid布局，此Grid布局總寬度為12列，當大于12列後會自動換行，根據實際需要進行調整即可，比如本例隻用了一行，左側為查詢字段，右側為操作按鈕，是以class分别是：col-3和col-9，在查詢字段的單元格中，内容為：

<div class="query-field-title">查詢字段</div>
<InputText type="text" v-model="kw"/>

顯示效果如下：

查詢欄外邊框的樣式類 query-box，代碼如下：

.query-box {
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 12px;
    background: #ffffff;
    border-radius: 6px;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 0px;
    box-shadow: #999999 0px 0px 6px;
}

查詢字段标題的樣式類 query-field-title，代碼如下：

.query-field-title {
    font-size: 10px;
    padding-bottom: 6px;
    color: #999999;
}

5.4資料欄

資料欄中一般是表格，是以在此，我們隻設計一個外邊框，代碼如下：

<div class="table-box" style="height: calc(100% - 156px);">
</div>

這裡，動态高度通過css來設定，代碼：

height: calc(100% - 156px);

156px需要在實際開發中手工計算。

外邊框樣式類 table-box 代碼：

.table-box {
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 12px;
    background: #ffffff;
    border-radius: 6px;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 0px;
    box-shadow: #999999 0px 0px 6px;
}

5.5表單對話框

表單對話框直接用PrimeVue的Dialog元件來實作，代碼如下：

<Dialog v-model:visible="dialogVisible" :modal="true" :draggable="true" style="width: 600px;">
    <template #header>
      <Tag value="表單标題" icon="pi pi-list"></Tag>
    </template>
    <div class="form-box">
      <div class="grid">
        <div class="col-2 form-field-title">表單字段</div>
        <div class="col-10">
          ......          
        </div>

        <div class="col-2 form-field-title">表單字段</div>
        <div class="col-10">
          ......
        </div>

        ......
      </div>
    </div>
    <template #footer>
      <Button label="取消" icon="pi pi-times" class="p-button-text" />
      <Button label="确定" icon="pi pi-check" autofocus />
    </template>
  </Dialog>

在對話框中，使用了 PrimeFlex的 Grid 來布局字段與輸入元件，這樣做，比較靈活可控，可以根據自己的需要進行編排字段和控件的布局，比如使用單列式，多列式等。

對話框中 Grid 外邊框樣式類 form-box 代碼：

.form-box {
    border: 1px solid #E9EDF1;
    background: #f8f9fa;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 6px;
    box-shadow: #999999 0px 0px 6px;
}

對話框中表單字段标題樣式類 form-field-title 代碼：

.form-field-title {
    color: #999999;
}

6.整體代碼及效果

示例代碼如下：

<template>
  <!--外邊框-->
  <div style="height: 100vh; padding: 6px;">
    <!--标題欄-->
    <Toolbar style="padding: 12px;">
      <template #start>
        <i class="pi pi-bars p-toolbar-separator mr-2" />
        <Tag value="标題"></Tag>
      </template>
      <template #end>
        <Button icon="pi pi-search" class="p-button-sm" style="margin-right: 6px;"/>
        <Button icon="pi pi-calendar" class="p-button-success p-button-sm" style="margin-right: 6px;"/>
        <Button icon="pi pi-times" class="p-button-danger p-button-sm" />
      </template>
    </Toolbar>
    <!--查詢欄-->
    <div class="query-box">
      <div class="grid">
        <div class="col-3">
          <div class="query-field-title">查詢字段</div>
          <InputText type="text"/>
        </div>
        <div class="col-9" style="padding-top: 15px;">
          <Button type="button" label="查詢" icon="pi pi-search" style="margin-right: 12px;"/>
          <Button type="button" label="全部" icon="pi pi-search" style="margin-right: 12px;"/>
          <Button type="button" label="建立" icon="pi pi-plus" style="margin-right: 12px;" @click="dialogVisible = true"/>
          <Button type="button" label="編輯" icon="pi pi-pencil" style="margin-right: 12px;"/>
          <Button type="button" label="删除" icon="pi pi-times" style="margin-right: 12px;"/>
        </div>
      </div>
    </div>
    <!--資料欄-->
    <div class="table-box" style="height: calc(100% - 156px);">
    </div>
  </div>

  <!--表單對話框-->
  <Dialog v-model:visible="dialogVisible" :modal="true" :draggable="true" style="width: 600px;">
    <template #header>
      <Tag value="表單标題" icon="pi pi-list"></Tag>
    </template>
    <div class="form-box">
      <div class="grid">
        <div class="col-2 form-field-title">表單字段1</div>
        <div class="col-10">
          <InputText type="text"/>
        </div>

        <div class="col-2 form-field-title">表單字段2</div>
        <div class="col-10">
          <InputText type="text"/>
        </div>

      </div>
    </div>
    <template #footer>
      <Button label="取消" icon="pi pi-times" class="p-button-text" @click="dialogVisible = false"/>
      <Button label="确定" icon="pi pi-check" autofocus />
    </template>
  </Dialog>
</template>

<script>
import Toolbar from 'primevue/toolbar'
import Tag from 'primevue/tag'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import Dialog from 'primevue/dialog'

export default {
  name: "UserManage",
  components: {
    Toolbar,
    Tag,
    Button,
    InputText,
    Dialog
  },
  data () {
    return {
      dialogVisible: false
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/sub_frame.css";
</style>

頁面效果：

表單效果：

Vue3 PrimeVue 應用開發實戰1

Vue3 PrimeVue 應用開發實戰1

1.PrimeVue簡介

2.使用PrimeVue

3.主題

4.使用元件

5.開發實戰

5.1 外邊框

5.2标題欄

5.3查詢欄

5.4資料欄

5.5表單對話框

6.整體代碼及效果

繼續閱讀

blackberry平台J2ME程式設計指南(一)

黑莓開發者的第一個BlackBerry應用開發

華為鴻蒙HarmonyOS4.0第二期開發者Beta來了。華為上個月開啟HarmonyOS4.0開發者Beta版招募活動

Android 項目必備（四十一）--＞Android 開發實戰經驗總結

Android應用_UI_啟動界面閃現标題欄問題（WindowNoTitle）

天風證券消費電子周報：蘋果持續推進visionOS應用開發和開發工具優化

Spring Boot 入門之初識微服務（一）

GaussDB技術解讀系列之SQL Audit，面向應用開發的SQL稽核工具

.NET 全場景開發終于到來了

基于LLM的SQL應用程式開發實戰（一）

HDC2022重磅釋出“鴻蒙賦能全家桶”，開發者的新時代要來了？

說句不好聽的，國産手機廠家真實不思進取不中用，華為被限制的這四年，是歌照唱舞照跳，似乎可以一直混下去，搞不好可以混個高端

鴻蒙4正式釋出，麒麟990系列機型有望率先更新！華為開發者大會8月4日-6日舉行，屆時鴻蒙4将正式釋出。鴻蒙4是新一代智

【疑問】這算是低代碼嗎？

五大跨平台桌面應用開發架構：Electron、Tauri、Flutter等

鴻蒙4公測版也推送了，然後，今天參加了HarmonyOS應用開發（UX）專場分論壇，QQ和微網誌的一線開發者們都做了分享，