[译]基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

时间  2020-01-18
标签 基于 vue webpack 以及 material design 渐进 web 应用 栏目 JavaScript 繁體版
原文   原文链接

渐进式web应用是大势所趋。愈来愈多的大公司开始使用这些技术（好比推特：https://mobile.twitter.com/）。css

想象你能够在地铁中浏览一个web应用，这个应用可以向用户推送通知而且提供实时的数据，以及提供相似于app的浏览，这些就是PWA的大体的能力。html

渐进式web应用（PWA）是一个web应用可以提供给用户一种相似于app的体验。PWA得益于现代web科技创新（Service Workers, Native APIS, JS famework）以及提高的web应用质量标准。vue

若是你想了解更多关于PWA，请访问这个很棒的Google developer page。webpack

看一下下面的PWA！看起来很像原生的app，是否是？git

推特渐进式web应用github

从开发者的角度来看，PWA相对于原生应用具备巨大的优势。它基本上就是一个网站，所以：web

  • 你能够选择任何你喜欢的框架来进行开发；vue-router

  • 一段代码搞定一切：它是跨平台的以及跨设备的（代码是经过用户的浏览器执行的）；vue-cli

  • 很容易得到：不须要经过应用商店来下载。数据库

然而，在2017年早期，PWA仍然面临一些限制条件：

  • Safari不支持一些基本的PWA特性，好比 Service workers，可是苹果公司彷佛已经准备开始着手了；

  • 一些原生的函数依然没有获得支持：对于更多信息，浏览这个页面What web can do。

教程目标

本教程的目标是利用VueJS以及Webpack从头建立一个基本的可是完整的渐进式web应用。咱们的应用将会知足介绍里面的全部需求：渐进式的，响应式的，链接独立的等等。我想给你一个可以在PWA内完成的目标的总览：流畅的原生式的应用，离线行为，原生特性结构，推送通知。

为了让事情保持挑战性，咱们打算构建一个猫图信息app：CropChat！CropChat用户可以阅读主流的猫的图片，而且可以打开他们了解更多细节以及上传新的猫的图片（首先从互联网，接着是从设备驱动或者照相机）。

这个教程将会分为几个部分，它们将会连续地进行发布

  • [Part 1] Lite基于Vue JS, Webpack 以及Material Design的渐进式web应用

  • [Part 2] 基于Vue-Resource以及VueFire将App和远程的API进行链接

  • [Part 3] 基于Service Worker来实现离线模式

  • [Part 4] 访问设备照相机来拍照

  • [Part 5] 访问设备驱动来上传图片

  • [Part 6] 实现推送通知

  • [Part 7] 访问设备地址

咱们的PWA的基本组件

咱们的渐进式web应用是基于你喜欢的如今组件！

让咱们开始part 1！

[PART 1] Lite基于VueJS, Webpack 以及 Material Design Lite建立一个单页面应用

若是你不熟悉VueJS 2,我强烈建议你阅读官方教程。

构建VueJS APP基础

咱们打算利用Vue-cli来建立咱们的应用：

`npm install -g vue-cli`

Vue-cli自带一些模板。咱们将会选择webpack模板。Webpack是一个对于Javascript应用的现代模块打包工具，它可以处理而且构建咱们的资源。Vue-cli将使用Webpack，vue-loader（热加载！），JS linter以及测试套件来建立一个虚拟的VueJS应用。

`vue init webpack cropchat`

你可能会问一些问题。下面是我使用过的配置：

`This will install Vue 2.x version of the template.`
`For Vue 1.x use: vue init webpack#1.0 cropchat`
? Project name cropchat
? Project description Image messenging application
? Author Charles BOCHET <charlesb@theodo.fr>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? No
`vue-cli · Generated "cropchat".`

这个过程会建立一个包含如下子文件夹的项目文件夹：

  • build: 包含webpack以及vue-loader配置文件

  • config: 包含咱们的app配置（环境，参数等等）

  • src: 咱们应用的源代码

  • static: 图片，css以及其它的公共资源

  • test: Karma & Mocha建立的单元测试文件

而后运行：

cd cropchat
npm install
npm run dev

这将会在你的浏览器打开localhost:8080：

经过一个合适的Manifest让它能够进行安装：

PWA的最大优势之一就是容易安装而且分享。让咱们别再等待了！

为了这样作，咱们须要添加一个manifest.json文件而且在index.html文件中进行声明。

pwa-manifest-webpack-plugin可以让咱们在应用构建的时候生成文件：

`npm i pwa-manifest-webpack-plugin --save`

咱们接着可以经过编辑build/webpack.dev.conf.js 以及build/webpack.prod.conf.js来更新构建过程。

在顶部引入pwa-manifest-webpack-plugin ：

var path = require('path')
var manifestPlugin = require('pwa-manifest-webpack-plugin')

而且将它添加到插件：

plugins: [
  new manifestPlugin({
    name: 'CropChat',
    description: 'CropChat - Image Messenger Application',
    display: 'fullscreen',
    icon: {
      src: path.resolve('src/assets/logo.png'),
      sizes: [200]
    }
  }),

最后，在 index.html中声明使用manifest.json：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="./manifest.json">

你可能须要重启你的应用：来这样作，杀掉之间的进程而且再次运行：

`npm run dev`

就是它了！让咱们在手机设备上安装CropChat。有多种方式能够从不一样的手机设备上访问localhost:8080。我最喜欢就是使用ngrok。

Ngrok是一种服务，能够远程登陆您的本地环境，免费！

安装它：

`npm install -G ngrok`

接着，运行：

`ngrok http 8080`

那应该会给你如下的输出：

ngrok by @inconshreveable                                                                   (Ctrl+C to quit)

Session Status                online                                                                        
Version                       2.1.18                                                                        
Region                        United States (us)                                                            
Web Interface                 http://127.0.0.1:4040                                                         
Forwarding                    http://5ef29506.ngrok.io -> localhost:8080                                    
Forwarding                    https://5ef29506.ngrok.io -> localhost:8080                                   

Connections                   ttl     opn     rt1     rt5     p50     p90                                   
                              39      3       0.01    0.01    120.01  881.89

经过你的手机浏览ngrok的url http://5ef29506.ngrok.io 。你能够在你的设备桌面添加！

Cropchat的源代码可以在GitHub here上可以访问。Git历史符合教程的步骤：你能够在下面的commit 5ff77fd3cd71a988fad9c187d57e87ea80d670f0种发现这个步骤的变化

想了解更多关于ngrok，你能够阅读Matthieu Auger的文章：Expose your local environment to the world with ngrok

建立视图框架和句柄路由

既然咱们已经具备合适的基础，那么咱们打算开始构建CropChat的特性。CropChat具备三个视图：

  • Home View: 展现一个猫的图片列表

  • Detail View: 展现特定猫的图片的细节（在Home View种点击访问）

  • Post View: 可以让用户上传一个新的图片

建立一个具备如下框架的src/component/HomeView.vue 视图：

<template>
  <ul class="list">
  </ul>
</template>
<script>
export default {
}
</script>
<style scoped>
  .list {
    width: 100%;
    padding: 0;
  }
</style>

对于src/component/DetailView.vue视图也是同样的：

<template>
  <div class="card-image">
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

对于 src/component/PostView.vue也是同样的：

<template>
  <div class="waiting">
    Not yet available
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
  .waiting {
    padding: 10px;
    color: #555;
  }
</style>

最终，更新路由文件 src/router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import HomeView from 'components/HomeView'
import DetailView from 'components/DetailView'
import PostView from 'components/PostView'
`Vue.use(Router)`
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/detail/:id',
      name: 'detail',
      component: DetailView
    },
    {
      path: '/post',
      name: 'post',
      component: PostView
    }
  ]
})

也移除没有使用的Hello.vue视图。你应该你可以直接看到影响你手机app的变化（热加载很棒，是否是？）

Git commit: 22ab9a2058dae8f7689b8635ff52d89652675aa6

安装 Material Design Lite

不知道Material Design Lite？它是一个轻量级的而且容易在你的web应用上实现Material Design 的框架。

你能够在这看到更多的文档：Get MDL.io

更新依赖：

`npm install material-design-lite --save`

更新src/App.vue来导入MDL样式而且加载MDL模块：

<script>
require('material-design-lite')
...
</script>
<style>
  @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
  @import url('https://code.getmdl.io/1.2.1/material.blue-red.min.css');
</style>

Git commit: b726b40488132c400dd861bd397f61b15e81631e

为你的单页面应用提供一个导航栏：

更新主要组件src/App.vue种的模块部分：

<template>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">CropChat</span>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">CropChat</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="/#/" @click="hideMenu">Home</a>
        <a class="mdl-navigation__link" href="/#/post" @click="hideMenu">Post a picture</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

由于Material Design Lite不是特别为单页面应用构建的，所以在用户点击菜单连接的时候咱们须要隐藏burger菜单：

<script>
...
export default {
  name: 'app',
  methods: {
    hideMenu: function () {
      document.getElementsByClassName('mdl-layout__drawer')[0].classList.remove('is-visible')
      document.getElementsByClassName('mdl-layout__obfuscator')[0].classList.remove('is-visible')
    }
  }
}
</script>

Git commit: 829d0af767a9f7cba13355296d9da79384d80099

传播视图并将你的应用带到生活

咱们尚未链接一个后台的服务。咱们如今打算暂时使用假数据。

建立一个src/data.js文件：

export default {
  pictures: [
    {
      'id': 0,
      'url': 'http://25.media.tumblr.com/tumblr_m40h4ksiUa1qbyxr0o1_400.gif',
      'comment': 'A cat game',
      'info': 'Posted by Kevin on Friday'
    },
    {
      'id': 1,
      'url': 'http://25.media.tumblr.com/tumblr_lhd7n9Qec01qgnva2o1_500.jpg',
      'comment': 'Tatoo & cat',
      'info': 'Posted by Charles on Tuesday'
    },
    {
      'id': 2,
      'url': 'http://24.media.tumblr.com/tumblr_m4j2atctRm1qejbiro1_1280.jpg',
      'comment': 'Santa cat',
      'info': 'Posted by Richard on Monday'
    },
    {
      'id': 3,
      'url': 'http://25.media.tumblr.com/tumblr_m3rmbwhVB51qhwmnpo1_1280.jpg',
      'comment': 'Mexico cat',
      'info': 'Posted by Richard on Monday'
    },
    {
      'id': 4,
      'url': 'http://24.media.tumblr.com/tumblr_mceknxs4Lo1qd477zo1_500.jpg',
      'comment': 'Curious cat',
      'info': 'Posted by Richard on Monday'
    }
  ]
}

在HomeView.vue script部分中导入数据而且将图片连接到对应的细节视图：

<script>
import data from '../data'
export default {
  methods: {
    displayDetails (id) {
      this.$router.push({ name: 'detail', params: { id: id }})
 }
  },
  data () {
    return {
      'pictures': data.pictures
    }
  }
}
</script>

更新HomeView.vue 模板和样式：

<template>
  <div>
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--3-col mdl-cell mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone">
        <div v-for="picture in this.$data.pictures" class="image-card" @click="displayDetails(picture.id)">
          <div class="image-card__picture">
            <img :src="picture.url" />
          </div>
          <div class="image-card__comment mdl-card__actions">
            <span>{{ picture.comment }}</span>
          </div>
        </div>
      </div>
    </div>
    <a class="add-picture-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored" href="/#/post">
      <i class="material-icons">add</i>
    </a>
  </div>
</template>
...
<style scoped>
  .add-picture-button {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 998;
  }
  .image-card {
    position: relative;
    margin-bottom: 8px;
  }
  .image-card__picture > img {
    width:100%;
  }
  .image-card__comment {
    position: absolute;
    bottom: 0;
    height: 52px;
    padding: 16px;
    text-align: right;
    background: rgba(0, 0, 0, 0.5);
  }
  .image-card__comment > span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
</style>

对DetailView.vue进行一样的操做：

<template>
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--8-col">
      <div class="picture">
        <img :src="this.$data.pictures[$route.params.id].url" />
      </div>
      <div class="info">
        <span>{{ this.$data.pictures[$route.params.id].info }}</span>
      </div>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">
      <div class="comment">
        <span>{{ this.$data.pictures[$route.params.id].comment }}</span>
      </div>
      <div class="actions">
        <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" href="/#/post">
          ANSWER
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import data from '../data'
export default {
  data () {
    return {
      'pictures': data.pictures
    }
  }
}
</script>
<style scoped>
  .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;
  }
</style>

Git commit: 39360f251da153c780cd148dc3cf234348bb1e87

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

最后的结果

咱们完成了，CropChat完成啦！

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

总结

我但愿我已经令你确信你可以利用VueJS和Webpack就能够简单地建立web应用。总结来讲：

  • Vue-cli能够在命令行种建立一个虚拟的VueJS + Webpack应用

  • 经过添加Manifest.json文件让你的web应用可以安装

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

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

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

译者注：

安利几个我以前翻译过的其它的关于PWA的文章以及我本身的PWA小应用：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程