34
软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering
随着移动互联网技术的快速发展，伴随4G 、5G 网速的到来，手机上网速度已经有了天反复地的变化，一种移动端的“微商城”悄无声息地流行起来，用户可以在任何时间、任何地点，只要有网络的地方，都可以拿起手机尽情地享受购物、学习的乐趣。
作为目前流行的前端框架Vue.js 来说，它采用的MVVM 设计模式，支持数据驱动和组件化开发。Vue 秉承了Angular 、React 这两种框架的优势，并且Vue.js 提供了更加简介、更易于理解的API ，在市场上也得到了大量的应用。1 Vue的基本工作原理
Vue 的数据驱动是通过MVVM （Model-View-ViewModel ）模式实现的。其中Model 负责业务的数据处理；View 负责DOM 视图处理；ViewModel 是监听者，负责将数据与视图进行连接的。在MVVM 模式下，
数据与视图之间是分离开的，不能直接进行通信，需要借助ViewModel 监听者，监视双方的动作并及时做出相应的绑定操作。如图1所示。2 Mint UI框架
在Vue.js 布局页面时，我们常常使用Mint UI 框架来实现。它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它可以快速构建出风格统一的页面，提升开发效率，真正意义上的按需加载组件。3 构建“微商城”项目环境3.1 npm简介
Node.js Package Manager 简称为npm ，它是由美国程序员Isaac Z.Schlueter 用JavaScript 写成的。npm 是node.js 的包的管理工具，用来安装各种 Node.js 的扩展，可以很轻松地对第三方包进行管理。3.2 创建vue-cli脚手架
Vue-cli 脚手架就是创建vue 项目的一个快速、简介的工具，可以在创建项目时自动生成vue 和webpack 的项目模板，帮助开发者搭建Vue.js 基础代码。
npm install vue-cli@版本 -global 3.3 Vue.js安装
目前创建项目最佳方式就是利用npm 中webpack 项目模板快速的搭建大型单页应用。webpack 是一个模块加载器，把前端开发需要的资源都当成了模块处理，利用webpack 创建项目只需要3-5分钟即可。
vueinitwebpackvue-shop /* 在当前目录构建项目 */
基于Vue.js 的“微商城”前端开发设计与实现
胡雅丽
（山西青年职业学院计算机与信息工程系  山西省太原市  037000）
cd vue-shop &&npm start /* 切换目录并启动项目 */
npm install    /* 安装项目依赖模块 */4 项目设计4.1 界面设计
该项目首页的设计分为四个模块：首页、分类、购物车和我的，“微商城”首页主要提供新闻资讯、图片分享、商品购物、留言反馈、视频专区和。页面结构分为四块区域：头部区域的当前页面文字显示、轮播图区域为消费者提供最新资讯等信息、宫格界面显示业务功能区、脚部区域的菜单选项，效果如图2所示。4.2 项目前端架构设计
前端项目SPA 的结构目录如图3所示。package.json 是包的管理器，记载了项目及工具的依赖配置文件；assets 是项目资源包，
摘　要：本文Vue.js 是目前较为流行的前端框架，利用vue 脚手架快速创建项目并且通过npm 安装项目所需要的第三方组件，比如Mint UI，可以快速构建出移动端页面。Vue 也是基于MVVM 模式来实现数据驱动的，通过分析“微商城”的结构，利用vue.js
view ui框架
前端开发
框架实现了“微商城”前端页面的设计与实现。
关键词：“微商城”; Vue.js; npm; Mint UI; MVVM
图2：“微商城”首页效果图
图1：Vue 的基本工作原理
35
软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering
如图片资源等；视图页面按照菜单级别统一在components 文件夹中管理，通过单文件组件的形式构成视图；router 是负责路由跳转的路由配置模块；App.vue 是根组件；main.js 是项目的入口文件。5 项目开发页面实现5.1 页面框架结构设计
App.vue 组件将页面分为三个区块，即头部区、中部区、脚部区。main.js 是项目的入口文件，主要代码如下：
import Vue from 'vue'import App from './App.vue'import router from './router'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import './lib/mui/css/mui.css'import './lib/mui/css/icons-extra.css'Vue.use(MintUI)new Vue({  router,
render:h =>h(App)}).$mount('#app')
利用“import App from './App.vue'”引入App.vue 文件5.2 编写局部组件
根据业务逻辑需要编写局部组件。例如在App .vue 文件中<template>模板中插入头部组件<mt-header fixed :title="$a.title"></mt-header>、中部区<router-view />和脚部区，<tabbar></tabbar>，其中脚部区显示的内容通过“import tabbar from "@/components/tabbar"”引用脚部组件tabbar.vue 。关键代码如下：
<template><div id="app">
<div class="container">
<mt-header fixed :title="$a.title"></mt-header><router-view /><tabbar></tabbar></div></div></template>
<script>import tabbar from "@/components/tabbar"</script>5.3 设计开发页面
以首页中部区设计为例，组件Home.vue 中<template>，关键代码如下：
<template><div class="home">
<swiper :imgList="imgList"></swiper>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/cart"><imgsrc="../assets/" alt />
<div class="mui-media-body">新闻资讯</div></router-link></li></ul></div></template>
在首页中部区域上方轮播图内容通过“import swiper from "@/components/swiper.vue"”引用轮播图组件swiper.vue 。6 总结
随着Web 前端技术开发的迅速发展，网站前端开发的手段越来越多。传统前端网站开发已远远不能满足越来越复杂的业务逻辑以及高效率。使用Vue.js 框架开发Web 前端可以大大提升开发速度、提高代码质量以及降低后期维护成本。参考文献
[1]王鹤琴，朱珍元.基于MVVM 模式的Web 开发研究[J].菏泽学
院学报,2019,41(02):7-13.
[2]麦冬，陈涛，梁宗湾.轻量级响应式框架Vue.js 应用分析[J].
信息与电脑(理论版),2017,377(07):58-59.
[3]王璐，崔保磊，潘红霞等.基于Vue.js 的在线设计开放平台
研究与实现[J].信息技术与信息化,2019(11):168-170.[4]沈剑翘，陈泽椿.Vue.js 在构建系统前端SPA 的应用[J].科
技创新与应用
,2020,No.295(03):187-188.
作者简介
胡雅丽（1981-），女，山西省大同市人。工程硕士，山西青年职业学院计算机与信息工程系讲师。研究方向为计算机应用。图3：前端项目SPA 的结构目录

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。