美文网首页饥人谷技术博客
Vue.js实现小米商城

Vue.js实现小米商城

作者: kumabearplus | 来源:发表于2017-07-13 16:54 被阅读1076次

前言

由于刚开始接触框架,我感觉一片茫然。框架太多,我该怎么选择?好像BootStrap是时下最火的前端框架吧?而未来的主流应该是Vue和React?

因为这些琐事,我耽误了自己将近半个月的时间。在这期间,我发现自己遇到新事物会不由自主地去逃避。后来,我想通了———与其想一些没用的东西,不如现学现卖——我已经学了Vue,为什么不用Vue做一个网站呢?因此,在网上查阅了一些相关资料后,我决定使用Vue框架来实现小米商城的首页。

动手开始干

既然已经选择使用Vue,那就需要安装它

npm i -g vue-cli // 全局安装
vue init webpack . // 将当前文件夹初始化为一个项目
npm i // 安装依赖
npm run dev // 本地自动打开有一个网页,实时显示页面

本页面的样式使用sass来编写,因此需要安装插件来支持

npm i -S sass-loader node-sass

想在线上查看效果

npm run build

其他配置

配置.png

效果及代码

在线预览
代码仓库

后记

这个效果做下来,感觉收获颇丰,并且自己对框架有了全新的认知,感觉自己打开了一扇新世界的大门。同时既然选择了做这个项目,就要坚持下去,有始有终!!

相关文章

  • Vue.js实现小米商城

    前言 由于刚开始接触框架,我感觉一片茫然。框架太多,我该怎么选择?好像BootStrap是时下最火的前端框架吧?而...

  • 小米商城 with Vue.js

    使用Vue.js完成小米官方商城页面 前言 经历了上一个动手实践的项目,重复性,机械性,低效率的编写经历,使我开始...

  • 2018-10-27

    小米闪购商城的基本结构还原 html代码 小米闪购-小米商城 ...

  • 小米商城的发货速度貌似比较慢

    想买小米的产品,比较了京东和小米商城的价格,小米商城比较有优势,于是选择了在小米商城买。没想到从下了订单到真正发货...

  • 小米6怎么样 看看首批用户怎么说

    昨日(4月28日)小米2017年最新旗舰机小米6线上线下正式开卖,此前,在小米商城、小米之家、京东商城、天猫商城和...

  • beego框架 golang web框架-小米商城

    beego框架 golang web框架-小米商城 beego小米商城功能介绍 首页 菜单分类展示 图片轮播 商品...

  • Appium一种较为优雅的操作方式

    以操作小米商城下单为例流程是 启动小米商城app, 点击分类,点击小米手机, 点击小米10 至尊版,点击加入购物车...

  • css+html+javascript(2019/7/4-7/1

    按时间排序 用css实现到处图标 2019.07.05 效果如下: 代码如下: 小米商城静态页面效果如下: 八卦和...

  • 2099元再现性价比,小米电视4A开卖!

    昨天发布的小米电视4A,于今日(3月23日)10:00在小米商城、小米之家、天猫电器城、京东商城、苏宁易购五大渠道...

  • 小米要造汽车了吗?

    小米商城官博发文,表示:“认真说个事儿,明天有新品”。单看文字大家肯定会期待小米新手机什么的,但小米商城偏偏配图是...

网友评论

    本文标题:Vue.js实现小米商城

    本文链接:https://www.haomeiwen.com/subject/uynwhxtx.html