build lavas 失败_基础教程 - 快速开始 PWA 工程 - 《Lavas 指导教程文档》 - 书栈网 · BookStack...

快速开始 PWA 工程

我们提供了一套 CLI 脚手架工具，协助开发者快速搭建一个基于 Vue 的 PWA 工程，并且迅速体验 PWA 效果。

准备

本地安装最新版本的 Node.js

学习 Vue 相关知识

学习 PWA 相关知识

依赖工具

如果想在本地开发 PWA 工程，从零开始开发一个基于 Vue 的 PWA 项目是非常困难的，我们还有很多除了业务实现之外的事情需要做。为了节省大家在业务之外的开发时间，我们提供了一套命令行工具 —— Lavas。目前 Lavas 提供了脚手架初始化工作，能够帮助我们在正式开发之前做好充分准备。

可以通过以下方式用 npm 安装 lavas 命令行工具：

$ npm install-g lavas

初始化工程

执行以下命令可以初始化 PWA 工程：

$ lavas init

目录结构

通过初始化命令，通过选择模版类型 App Shell (这里有 4 种模板类型，供您选择)，可以在当前目录下下找到我们新建的项目 pwa-project 文件夹。

pwa-project/(项目根目录)

|-build/(Webpack和dev-server相关调试和构建配置文件)

|-config/(通用模块配置)

|-src/(源代码)

|-assets/(依赖的静态资源)

|-components/(业务开发的VueComponent)

|-pages/(具体业务开发的Page页面Component)

|-store/(Vuexstore)

|-app.js(Vue入口执行文件)

|-App.vue(项目的根Component)

|-entry-client.js(前端渲染入口文件)

|-entry-skeleton.js(skeleton渲染入口)

|-router.js(Vue-router路由配置文件)

|-sw-register.js(注册service worker文件入口)

|-static/(不需要经过构建的一些静态资源)

|-index.html

|-package.json

项目目录结构我们参照的基础是 Vue 工程推荐使用的模版文件目录 https://github.com/vuejs-templates，在其基础上进行了 PWA 相关的集成封装。

build 文件夹

build 文件夹内的文件都是 PWA 项目在调试和构建时候所需的配置文件，我们默认采用的是 Webpack 打包工具。

内置 webpack 的 dev-server 可以帮助我们在本地调试项目。

运行

在导出项目工程后，我们可以直接预览初始工程的效果，在初始工程中，含有几个默认的 Page 页面，在开发者自己的业务开发中，重点关注 Page 的开发以及 Components 的开发。

执行下列操作进行预览：

$ cd pwa-demo

$ npm install

$ npm run dev

完成系列操作后，我们可以看到浏览器默认打开了我们的工程预览页面。 这个时候我们进入 Chrome Develop 模式 (windows： F12, mac: Command + Option + I ) 就能看到如下效果。

改动任何代码都会有热重载机制，在代码不出现问题的前提下都能实时看到代码运行后的效果。