胡雅麗

（山西青年職業(yè)學(xué)院計算機(jī)與信息工程系 山西省太原市 037000）

隨著移動互聯(lián)網(wǎng)技術(shù)的快速發(fā)展,伴隨4G、5G 網(wǎng)速的到來，手機(jī)上網(wǎng)速度已經(jīng)有了天反復(fù)地的變化，一種移動端的“微商城”悄無聲息地流行起來，用戶可以在任何時間、任何地點，只要有網(wǎng)絡(luò)的地方，都可以拿起手機(jī)盡情地享受購物、學(xué)習(xí)的樂趣。

作為目前流行的前端框架Vue.js 來說，它采用的MVVM 設(shè)計模式，支持?jǐn)?shù)據(jù)驅(qū)動和組件化開發(fā)。Vue 秉承了Angular、React這兩種框架的優(yōu)勢，并且Vue.js 提供了更加簡介、更易于理解的API，在市場上也得到了大量的應(yīng)用。

1 Vue的基本工作原理

Vue 的數(shù)據(jù)驅(qū)動是通過MVVM（Model-View-ViewModel）模式實現(xiàn)的。其中Model 負(fù)責(zé)業(yè)務(wù)的數(shù)據(jù)處理；View 負(fù)責(zé)DOM 視圖處理；ViewModel 是監(jiān)聽者，負(fù)責(zé)將數(shù)據(jù)與視圖進(jìn)行連接的。在MVVM 模式下，數(shù)據(jù)與視圖之間是分離開的，不能直接進(jìn)行通信，需要借助ViewModel 監(jiān)聽者，監(jiān)視雙方的動作并及時做出相應(yīng)的綁定操作。如圖1所示。

2 Mint UI框架

在Vue.js 布局頁面時，我們常常使用Mint UI 框架來實現(xiàn)。它包含豐富的 CSS 和 JS 組件,能夠滿足日常的移動端開發(fā)需要。通過它可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面,提升開發(fā)效率，真正意義上的按需加載組件。

3 構(gòu)建“微商城”項目環(huán)境

3.1 npm簡介

Node.js Package Manager 簡稱為npm，它是由美國程序員Isaac Z.Schlueter 用JavaScript 寫成的。npm 是node.js 的包的管理工具，用來安裝各種 Node.js 的擴(kuò)展，可以很輕松地對第三方包進(jìn)行管理。

3.2 創(chuàng)建vue-cli腳手架

Vue-cli 腳手架就是創(chuàng)建vue 項目的一個快速、簡介的工具，可以在創(chuàng)建項目時自動生成vue 和webpack 的項目模板，幫助開發(fā)者搭建Vue.js 基礎(chǔ)代碼。

npm install vue-cli@版本 -global

3.3 Vue.js安裝

目前創(chuàng)建項目最佳方式就是利用npm 中webpack 項目模板快速的搭建大型單頁應(yīng)用。webpack 是一個模塊加載器，把前端開發(fā)需要的資源都當(dāng)成了模塊處理，利用webpack 創(chuàng)建項目只需要3-5分鐘即可。

圖1：Vue 的基本工作原理

圖2：“微商城”首頁效果圖

4 項目設(shè)計

4.1 界面設(shè)計

該項目首頁的設(shè)計分為四個模塊：首頁、分類、購物車和我的，“微商城”首頁主要提供新聞資訊、圖片分享、商品購物、留言反饋、視頻專區(qū)和聯(lián)系我們。頁面結(jié)構(gòu)分為四塊區(qū)域：頭部區(qū)域的當(dāng)前頁面文字顯示、輪播圖區(qū)域為消費者提供最新資訊等信息、宮格界面顯示業(yè)務(wù)功能區(qū)、腳部區(qū)域的菜單選項，效果如圖2所示。

4.2 項目前端架構(gòu)設(shè)計

圖3：前端項目SPA 的結(jié)構(gòu)目錄

前端項目SPA 的結(jié)構(gòu)目錄如圖3所示。package.json 是包的管理器，記載了項目及工具的依賴配置文件；assets 是項目資源包，如圖片資源等；視圖頁面按照菜單級別統(tǒng)一在components 文件夾中管理，通過單文件組件的形式構(gòu)成視圖；router 是負(fù)責(zé)路由跳轉(zhuǎn)的路由配置模塊；App.vue 是根組件；main.js 是項目的入口文件。

5 項目開發(fā)頁面實現(xiàn)

5.1 頁面框架結(jié)構(gòu)設(shè)計

App.vue 組件將頁面分為三個區(qū)塊，即頭部區(qū)、中部區(qū)、腳部區(qū)。main.js 是項目的入口文件，主要代碼如下：

5.2 編寫局部組件

根據(jù)業(yè)務(wù)邏輯需要編寫局部組件。例如在App .vue 文件中