2020 年 9 月 16 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

使用 Primevue 製作 Vue 模板

2 min read
vue-features

使用 Primeuve 製作 Vue 模板

 

  1. 程式碼:https://github.com/polinwei/vue-template-primevue
  2. 展示:

https://polinwei.github.io/vue-template-primevue/

https://polinwei.github.io/vue2-primevue/

 

  • 環開發環境

vue.jsThemes 官方網站有推薦使用 Primeuve , 其中有一款是免費的 Template: Sigma , 其 source code 在 https://github.com/primefaces/sigma-vue , 就以這為學習製作 template 的開始。在 在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages 提到如何快速開發。延續它我們將常用的套件選好後,設定成常用的開發模版 (preset) 。

使用指令 : vue create vue-template-primevue, 選擇 Manually select features

vue-manually

將常用的 Bable, Router, Linter / Formatter able, Router, Linter / Formatter 選起來

vue-features

其它的選項都使用預設值, 最後的 preset 選擇 Y , 並給 Basic App 的名字

vue-preset-define

以後開發新專案時, 就直接選 Basic App 就可以了

vue-preset-basic-app

 

  • npm install 安裝套件

PrimeVue :  is available at npm, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.

FullCalendar : is great for displaying events

Axios : Promise based HTTP client for the browser and node.js. ref: vue-axios install

PrimeFlex :  is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.

Prism :  is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

sass-loader : Loads a Sass/SCSS file and compiles it to CSS.

# Primevue
npm install primevue --save
npm install primeicons --save

# FullCalendar
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid

#Axios
npm install --save axios vue-axios

npm install sass-loader sass webpack --save-dev
npm install primeflex
npm install prismjs

 

  • 匯入必要元件 ( Import Components )

建立目錄 plugins ,並建立檔案 primevue.js ,將 PrimeVue 所有的 Components 載入,然後於 main.js import 進來.

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './plugins/primevue';
import './assets/layout/layout.scss';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

  • Layout 製作:container

在首頁 App.vue 先作整個頁面的容器,而這個 :class="containerClass" 放在 computed 依行動裝置的直立或橫放時,作响應式的變更,詳見 Computed Caching vs Methods 與 Object Syntax 說明

<template>
  <div :class="containerClass" @click="onWrapperClick">
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      layoutMode: "static",
      layoutColorMode: "dark",
      staticMenuInactive: false,
      overlayMenuActive: false,
      mobileMenuActive: false
    };
  },
  methods: {
    onWrapperClick() {
      if (!this.menuClick) {
        this.overlayMenuActive = false;
        this.mobileMenuActive = false;
      }

      this.menuClick = false;
    },
  },
  computed: {
    containerClass() {
      return [
        "layout-wrapper",
        {
          "layout-overlay": this.layoutMode === "overlay",
          "layout-static": this.layoutMode === "static",
          "layout-static-sidebar-inactive":
            this.staticMenuInactive && this.layoutMode === "static",
          "layout-overlay-sidebar-active":
            this.overlayMenuActive && this.layoutMode === "overlay",
          "layout-mobile-sidebar-active": this.mobileMenuActive
        }
      ];
    }
  },
};
</script>

 

  • Layout 製作: Topbar

建立一個 LayoutTopbar.vue 的檔案,在此加入自定義函數

<template>
 <div class="layout-topbar">
  <button class="p-link layout-menu-button" @click="onMenuToggle">
   <span class="pi pi-bars"></span>
  </button>
...
</template>

<script>
export default {
    methods: {
        onMenuToggle(event) {
            this.$emit('menu-toggle', event);
        }
    }
}
</script>

 

在首頁 App.vue 的 template 加入 <LayoutTopbar @menu-toggle="onMenuToggle" />

<template>
  <div :class="containerClass" @click="onWrapperClick">
    <LayoutTopbar @menu-toggle="onMenuToggle" />
  </div>
</template>

在 script 加入 component: LayoutTopbar component: LayoutTopbar 相關的程式碼

<script>
import LayoutTopbar from "./components/layout/LayoutTopbar.vue";

export default {
  methods: {
    onMenuToggle() {
      this.menuClick = true;

      if (this.isDesktop()) {
        if (this.layoutMode === "overlay") {
          this.overlayMenuActive = !this.overlayMenuActive;
        } else if (this.layoutMode === "static") {
          this.staticMenuInactive = !this.staticMenuInactive;
        }
      } else {
        this.mobileMenuActive = !this.mobileMenuActive;
      }

      event.preventDefault();
    },
    isDesktop() {
      return window.innerWidth > 1024;
    }
  },
  components: {
    LayoutTopbar: LayoutTopbar
  }
};
</script>

 

  • Layout 製作:sidebar

在官方文件中有提到 TransitionsVue 提供了 transition 的封裝元件,在下列情形中,可以給任何元素和元件添加 進入/離開 的場景轉換效果

  1. Conditional rendering 條件渲染 (使用 v-if)
  2. Conditional display 條件展示 (使用 v-show)
  3. Dynamic components 動態元件
  4. Component root nodes 組件根節點

 

在 Template 中加入下列 HTML

<transition name="layout-sidebar">
  <div :class="sidebarClass" @click="onSidebarClick" v-show="isSidebarVisible()">
    <div class="layout-logo">
        <router-link to="/">
            <img alt="Logo" :src="logo" />
        </router-link>
    </div>
    
  </div>

</transition>

在 Script 再加入對 Sidebar 的 CSS & Method 函數

export default {
  methods: {
    isSidebarVisible() {
      if (this.isDesktop()) {
          if (this.layoutMode === 'static')
              return !this.staticMenuInactive;
          else if (this.layoutMode === 'overlay')
              return this.overlayMenuActive;
          else
              return true;
      }
      else {
          return true;
      }
    },
    onSidebarClick() {
        this.menuClick = true;
    },  
  },
  computed: {
    sidebarClass() {
      return ['layout-sidebar', {
          'layout-sidebar-dark': this.layoutColorMode === 'dark',
          'layout-sidebar-light': this.layoutColorMode === 'light'
      }];
    },
    logo() {
        return (this.layoutColorMode === 'dark') ? "assets/layout/images/logo-white.svg" : "assets/layout/images/logo.svg";
    }
  },

};

 

其它 Menu 程式碼, 請查:https://github.com/polinwei/vue-template-primevue

Copyright © All rights reserved. | Newsphere by AF themes.