当前位置: 首页 > 工具软件 > cnode-vue > 使用案例 >

cnode-webapp项目搭建 (pwa学习一)

鲁德佑
2023-12-01

一、概述

lavas是百度出品的基于 Vue.js 的 PWA 解决方案。
使用lavas解决方案对 cnode社区webapp项目hybridApp版进行重构,搭建一个PWA应用。使用cnodeJs社区 提供的api获取数据。
架构:lavas + vant-ui
项目地址:cnode-webapp

预览

二、安装lavas

cnpm install lavas -g

三、使用lavas脚手架初始化项目

lavas init 
npm install 
npm run dev 

四、引入Vant UI

Vant-UI

/core/app.js引入

/* 全局使用UI框架 vant */
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

五、实现

1、创建桌面快捷方式

要实现这个功能,本质是需要在构建后的根目录配置一个manifest.json给浏览器提供必要的信息

2、Service Worker

  • Service Worker 有以下功能和特性:
  • 一个独立的 worker 线程,独立于当前网页进程,有自己独立的 worker context。
  • 一旦被 install,就永远存在,除非被手动 unregister
  • 用到的时候可以直接唤醒,不用的时候自动睡眠
  • 可编程拦截代理请求和返回,缓存文件,缓存的文件可以被网页进程取到(包括网络离线状态)
  • 离线内容开发者可控
  • 能向客户端推送消息
  • 不能直接操作 DOM
  • 必须在 HTTPS 环境下才能工作
  • 异步实现,内部大都是通过 Promise 实现
    所以我们基本上知道了 Service Worker 的伟大使命,就是让缓存做到优雅和极致,让 Web App 相对于 Native App 的缺点更加弱化,也为开发者提供了对性能和体验的无限遐想。

3、在service-worker.js中对指定的api配置缓存

workbox.routing.registerRoute(new RegExp('https://cnodejs.org/api/v1/topics'),
    workbox.strategies.cacheFirst());

4、预缓存设置

      //将index.html或其他文件加入到预加载页面中
        globPatterns: [
            '**/*.{html,js,css,eot,svg,ttf,woff}'
        ]

5 SPA下的骨架屏设计

Skeleton本身直接被注入到了index.html中,在页面的 HTML 结构中就已经包含了 Skeleton,后续渲染成功后再进行替换。如果配合 Service Worker,则可以将 HTML 文件缓存起来,在页面切换时快速展现,达成目标。
1、Skeleton 本身的编写
core文件夹下的Skeleton.vue加上vant的骨架屏组件

  <van-skeleton title avatar :row="3" />

2、 配置 Service Worker,添加预缓存文件列表

	serviceWorker: {
   	 	globPatterns: [
        	'**/*.{html,js,css,eot,svg,ttf,woff}'
	    ],
    // ...

6、图片懒加载 (vant-ui)

注册指令

import Vue from 'vue';
import { Lazyload } from 'vant';
// options 为可选参数,无则不传
Vue.use(Lazyload, {
    loading:'static/img/default-person.png',
    error:'static/img/default-person.png'
});

设置懒加载图片

<img v-for="img in imageList" v-lazy="img" >

7、页面自适应方案

通过postcss-pxtorem 插件配合 lib-flexible实现

  • postcss-pxtorem 转换px为rem
  • lib-flexible用于设置 rem 基准值

安装 、配置

cnpm install postcss-pxtorem --save-dev
cnpm install lib-flexible --save-dev
  • /core/app.js下引入flexible
// 引入flexble 页面自适应工具之一
import 'lib-flexible/flexible.js'
  • 项目中自动生成了配置文件postcssrc.js
module.exports = {
    plugins: {
        // to edit target browsers: use "browserslist" field in package.json
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
          	rootValue: 32,   //The root element font size
         	 propList: ['*']  //(Array) The properties that can change from px to rem
        }
    }
};

六、打包前配置

  • 修改 publicPath为 “ ./ ” 指当前目录下
  • 修改lavas.fonfig.js中整个项目中的基础路径 router对象 中base = ’ /cnode-webapp/ ’ ,因为我发布在了https://itch8.github.io/cnode-webapp/
lavas build
 类似资料: