维护模式
这个仓库中的代码处于维护模式，未来的修改计划有限。我们未来的重点是使用新的pwa插件为Vue CLI 3.0添加PWA支持。我们鼓励这项工作用于新项目，因为它正在积极开发。如果您对当前的代码库有问题，请使用新版本，并让我们知道您的想法。
vue-pwa-boilerplate
一个全功能的PWA模板，具有webpack、热加载、lint-on-save、单元测试和css提取功能。
文档
本模板建立在webpack主模板之上，所以请参考webpack模板文档。
查看官方的Vue.js指南，了解关于Vue的一般信息，这些信息并不针对本模板。
使用方法
这是一个vue-cli的项目模板，建议使用npm 3+或yarn来提高依赖树的效率。建议使用npm 3+或yarn来实现更高效的依赖树。
$ npm install -g vue-cli $ vue init pwa my-project $ cd my-project $ npm install $ npm run dev
这将会使用主分支来构建项目的脚手架。如果您想使用最新版本的PWA模板，请执行以下操作：
$ vue init pwa#development my-project
警告 该开发分支不被认为是稳定的，可能包含 bug 或根本无法构建，所以使用时请自担风险。
如果你的机器上已经在使用 8080 端口，你必须在 /config/index.js 中更改端口号。否则 npm run dev 会失败。
不包括的内容
你应该配置你的 Web 服务器来添加 HTTP 头，以防止缓存关键的服务工作文件。如果你不这样做，浏览器可能会缓存内容长达 24 小时。此外，您应该添加 HTTP 头，以防止静态文件夹的内容无意中被缓存过长。
更多信息请参见文档中的 "配置你的 Web 服务器以防止缓存"。
包含的内容
- shell + 静态资产（prod）的 Service Worker 预缓存。
- 使用
<link rel="preload">进行脚本（异步分块）预加载。 - Web 应用程序清单 + favicons
- 移动友好的 meta 视口
- Lighthouse 得分 90+/100
-
npm run dev: first-in-class development experience.- Webpack +
vue-loaderfor single file Vue components. - State preserving hot-reload
- State preserving compilation error overlay
- Lint-on-save with ESLint
- Source maps
- Webpack +
-
npm run build: Production ready build.- JavaScript minified with UglifyJS v3.
- HTML minified with html-minifier.
- CSS across all components extracted into a single file and minified with cssnano.
- All static assets compiled with version hashes for efficient long-term caching, and a production
index.htmlis auto-generated with proper URLs to these generated assets. - Use
npm run build --reportto build with bundle size analytics. - Generates a Service Worker for offline caching your static assets using sw-precache-webpack-plugin
-
npm run unit: Unit tests run in PhantomJS with Karma + Mocha + karma-webpack.- Supports ES2015+ in test files.
- Supports all webpack loaders.
- Easy mock injection.
-
npm run e2e: End-to-end tests with Nightwatch.- Run tests in multiple browsers in parallel.
- Works with one command out of the box:
- Selenium and chromedriver dependencies automatically handled.
- Automatically spawns the Selenium server.
npm run dev：一流的开发体验。
Webpack + vue-loader for single file Vue components.
保存状态的热加载
保存状态的编译错误覆盖
使用ESLint进行Lint-on-save
源地图
npm运行构建。生产准备就绪。
使用UglifyJS v3对JavaScript进行了最小化。
HTML用html-minifier最小化。
将所有组件的CSS提取到一个文件中，并使用cssnano进行最小化。
所有的静态资产都编译了版本哈希值，以实现高效的长期缓存，并且自动生成了一个带有正确URL的生产index.html。
使用npm run build --reportto build与bundle size analytics。
使用 sw-preache-webpack-plugin 生成一个服务工作程序，用于离线缓存你的静态资产。
npm运行单元。在PhantomJS中使用Karma+Mocha+karma-webpack运行单元测试。
在测试文件中支持ES2015+。
支持所有webpack加载器。
轻松的模拟注入。
npm运行e2e。使用Nightwatch进行端到端测试。
在多个浏览器中并行运行测试。
开箱即用一条命令就可以工作。
自动处理Selenium和chromedriver的依赖关系。
自动生成Selenium服务器。
Fork 它并制作你自己的
你可以通过 fork 这个 repo 来创建你自己的 boilerplate，并与 vue-cli 一起使用。
vue init username/repo my-project
贡献
这个项目是 vue-webpack-boilerplate 模板的修改版。
虽然我们欢迎社区的贡献，但请注意，本项目和 vue-webpack-boilerplate 之间共享的配置的更改应该首先针对 vue-webpack-boilerplate 进行。
一旦 upstream 的 PR 被合并，请针对这个项目提交一个额外的 PR，做相应的修改。这将有助于确保共享配置不会有太大的差异。
任何与本项目有关的、与 service worker 相关的、或与其他 PWA 功能相关的改动，都不需要一个等价的 upstream PR。
（The first version translated by vz on 2021.01.30）