快速开始 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 ) 就能看到如下效果。
改动任何代码都会有热重载机制,在代码不出现问题的前提下都能实时看到代码运行后的效果。