基于 Vue JS, Webpack 以及 Material D

原文链接：http://zcfy.cc/article/a-progressive-web-application-with-vue-js-webpack-amp-material-design-part-1-2772.html

importdatafrom'../data'exportdefault{  data () {return{'pictures': data.pictures    }  }}

.picture>img{color:#fff;width:100%;  }.info{text-align: right;padding:5px;color:#555;font-size:10px;  }.comment{padding:10px;color:#555;  }.actions{text-align: center;  }

Git commit:39360f251da153c780cd148dc3cf234348bb1e87

关于'href'链接的使用：我推荐使用vuejs的组件但是在这我想使代码尽可能的简单。

最后的结果

我们完成了，CropChat完成啦！

源代码能够在GitHub repository访问：https://github.com/charlesBochet/vueJSPwa

Conclusions

我希望我已经令你确信你能够利用VueJS和Webpack就可以简单地创建web应用。总结来说：

Vue-cli可以在命令行种创建一个虚拟的VueJS + Webpack应用

通过添加Manifest.json文件让你的web应用能够安装

使用Vue-Router以及Material Design来创建一个类似于app用户体验的应用

然而，CropChat还依然不是一个渐进式web应用：让我们看一下PWA的需求清单：

一半的需求还没有满足。在下一个部分将会有其它的目标。未完待续！