基于uve.js的資產管理界面設計

林中華 呂習棟

在實驗室管理中，資產管理占有很大的比重，隨著社會經濟的飛速發展，新舊設備更新迭代的速度這幾年呈幾何式增長，隨之而來的問題就是舊的設備還在使用，新的設備也不斷加入，管理這些設備資產變得非常繁瑣。管理員除了要對設備進行入庫、出庫登記，做好設備移動位置、設備借還的記錄，還要每天檢查設備的安放位置，每年還要應對檢查，占用了大量的時間和精力。本文中的資產管理軟件就是基于這個需求而開發的。

介紹開發軟件

1. Vue

Vue是vue.js的簡寫，從后綴的js我們可以看出這是一款js框架。在前端開發中框架非常之多，因為人們對網頁界面的要求越來越高，基礎的Html+Css+JavaScript的嵌套已經無法滿足程序開發的需要，目前市面上常用的網頁幾乎都是使用框架處理。如果不使用框架來編程網頁也可以，但只適用于測試或者學習，商用的話用戶對界面功能的要求校多，且需要不斷改動，所以一款好用的框架是每個程序員的剛需。

2. Element

Element是餓了么公司開發的一款前端UI組件庫，Element和Vue處理的事情不相同，element只負責圖形界面的設計和展示，而Vue更像一個電腦里面的系統，負責協調各個組件的運行和最終的項目發布。

3.基本框架

本次開發的資產管理系統是一個部署到服務器的網頁代碼，用戶不需要安裝，隨時打開瀏覽器輸入網址就可以操作，網頁還是響應式的，也就是說可以使用手機打開，界面會自動調整到合適手機的字體大小，操作界面也符合手機的操作習慣。

本項目的編寫語言以Html，Css，JavaScript為基礎，然后導入Vue總框架，在Vue上再導入element框架。操作界面結構分為當前資產、歷史數據和設置菜單3個部分。

項目搭建

1.創建Vue工程

Vue只能在命令輸入框輸入指令執行操作，創建命令的指令是vue create manage，其中manage是工程名字，這樣在當前的目錄下就會創建了一個叫做manage的文件夾，里面包含了項目所需要的各種文件，這樣的好處是不用自己到處創建文件夾然后再到官網下載依賴文件。

Vue使用的是JavaScript語言，其中主要文件包括main.js這個文件是整個框架的開端，在main.js里面，要引入其他的組件，并將Vue整個對象實例化，就是new Vue（），并且在里面傳入初始值，要綁定DOM的id。

Vue是屬于數據驅動型的，相比之前使用的Html+Css+JavaScript，它不需要通過查找對應的DOM修改數值，直接修改數據DOM里面的數值就會發生變化，大大提高了開發者的效率。

2.引入element組件庫

在main.js中通過import element from‘element，Vue.use（ElementUI）引入element插件，這樣的話就可以在其他模板中使用element組件。

首先在html區域寫入一個div標簽，然后再script位置對標簽進行初始化，就可以引入組件了。初始化的函數是：echarts. init（document.getElementById（main2）），其中main2是div的id名稱。通過這方式，我們先后引入了布局容器組件、導航菜單組件及表格組件。然后通過修改各個菜單里面的文字標簽，顯示正確的文字。圖1為軟件在element的加持下展示的樣子，界面很友好大方。

本文的資產管理軟件根據實際的需求出發，很好地解決了資產管理人員在實際工作遇到的問題，把繁瑣、重復的事情交給計算機處理，使用者只需要關注自己的錄入工作，大大提高了效率，管理軟件中的統計功能可以讓使用者直觀地看到資產的總體情況，以及資產每天的變動情況。