随着Vuejs的快速发展和Vuejs相关生态系统的完善，构建一个VueCli工程应用已经相对容易。本文主要介绍了使用VueCli脚手架，结合vuetify UI框架创建和配置一个完整的PWA应用。
简介
本文所使用的相关软件版本号：
- Nodejs: v13.12.0
- npm: 6.13.7
- @vue/cli: 4.3.1
VueCli
基于Vuejs的组件化开发脚手架。本文不会详细介绍VueCli的安装和使用，详情请参考官网教程。在本文中，主要的VueCli的使用方式是UI控制台，也就是在命令行运行
vue ui
本文围绕VueCli的单页应用项目，同时会加入相关插件：Vue Router, Vuex等等。
Vuetify
官方网页： https://vuetifyjs.com/
基于Vuejs（VueCli）的现代化组件库，采用了Google的设计语言Material Design的扁平化风格，通过VueCli中的plugin插件方式安装（而不是通过dependency依赖），同时自动支持了treeshaking动态加载技术，让网页只加载需要的UI组件而不是加载整个库，从而有效减小网页大小。
相比于传统的ElementUI等组件库，Vuetify显得更加专业而深入，更新周期更短，设计更加先进，并且提供了长期的支持。
虽然Vuetify默认从jsdelivr CDN加载外部资源，但是在国内还是有一定可能因为部分网络问题出现未知的错误， 请各位自行解决。
PWA
Progressive Web App 渐进式网页应用
在当下，越来越多的新进平台（小程序等）加入了传统的安卓和苹果两大应用平台，使得跨平台应用的开发日益困难。在这种情况下，越来越多的应用转向了网页应用的模式，通过浏览器实现跨平台应用。与此同时，以Chrome为首的浏览器逐渐支持了Service Worker等复杂的前端功能，也使得网页应用的用户体验进一步提升。PWA就是一种通过利用Service Worker等浏览器的先进功能，用浏览器模拟Native App级别的用户体验，同时可以实现离线运行、消息推送等功能。
创建项目
使用VueCli的UI控制台（vue ui启动）在项目管理部分点击新建项目，填写选择工作目录位置并填写项目名称。本文使用npm作为包管理器，正常情况选择默认即可。
在Preset部分，点击手动配置，并选择下列项目：
- Babel: 兼容性编译，对旧版浏览器提供兼容
- Router: 官方的路由插件
- Vuex: 官方的状态管理（储存）插件
- PWA：官方的渐进式网页应用插件
- Linter: 代码规范插件（对于很容易写乱的前端项目还是规范一下代码吧）
- Use config files: 因为插件较多，建议使用分开的配置文件
- （其它插件如有需要也可以安装）
接下来选择ESLint的模式（本文使用了Standard Config），然后点击创建项目。可以选择保存预设供以后使用，但笔者还是建议每个项目根据需求手动配置。
稍等片刻，项目就创建好啦！
接下来还需要安装Vuetify插件，在控制台的Plugin插件部分搜索vue-cli-plugin-vuetify，然后安装，preset预设选择默认推荐即可！
到此位置，我们的初始项目已经创建完毕，你可以通过task任务部分的serve功能进行热更新的预览，也可以build打包称为一个单页应用。
文件目录
安装完Vuetify以后的初始项目的文件目录如下：（略去了不需要改动的其它配置文件和README.md等文件）
vue.config.jsVueCli工程的配置文件，需要自行创建/public/img静态图标文件favicon.ico网页主图标index.html网页主入口robot.txt对网页爬虫的配置
/src/assets静态资源/components组件/router路由/storeVuex状态管理/views视图级组件App.vue主组件main.js主程序入口registerServiceWorker.jsPWA入口
接下来进入重点部分！
配置
图标
因为PWA的属性，我们需要一整套不同尺寸的图标用于不同的平台。为了生成这些图标，我们可以使用一个工具网页https://realfavicongenerator.net/
在这个网页上上传你的图标文件，然后按照提示完成不同平台的背景颜色等配置，就可以打包下载所有的图标文件了。注意，以下几个配置项目需要特殊关照：
- 在Favicon for iOS - Web Clip的Assets中选中iOS 7 and Later下的复选框
- 在Windows Metro的Assets中选中Windows 8.0 / IE 10下的复选框，可以取消Windows 8.1 and 10 / IE 11 and Edge下面的复选框
生成并下载完毕以后，根据Vue PWA的默认配置，需要进行如下修改：
- 删除
site.webmanifest和browserconfig.xml，以及除了apple-touch-icon-152x152.png以外的所有apple-touch-icon系列图标 - 创建
android-chrome-192x192.png和android-chrome-512x512.png的副本，并把副本重命名为android-chrome-maskable-192x192.png和android-chrome-maskable-512x512.png - 把
mstile-144x144.png重命名为msapplication-icon-144x144.png - 移动
favicon.ico到/public文件夹中 - 移动其它文件到
/public/img/icons/文件夹中
此时此文件夹中应该有如下九个文件android-chrome-192x192.png，android-chrome-512x512.png，android-chrome-maskable-192x192.png，android-chrome-maskable-512x512.png，apple-touch-icon-152x152.png，favicon-16x16.png，favicon-32x32.png，msapplication-icon-144x144.png，safari-pinned-tab.svg
注意，不需要修改HTML！
主题
为了配置PWA的主题和应用名称等，我们需要在vue.config.js中导出的对象中这样配置应用名称和主题颜色（手机上浏览器网址栏和手机状态栏的显示颜色）：
pwa: {
name: 'My App',
themeColor: '#123456',
}
另外，在/public/index.html应用主入口中可以手动修改应用的title（body里面还有一处），可以不使用webpack的名称，手动编辑应用标签页的显示内容和noscript状态的显示内容。
另外，为了大部分效果，需要在public/index.html的body元素上添加style="margin: 0;"来删除body自带的8px的外边距，同时需要在html元素上添加style="overflow-y: auto;"来消除默认的滚动条。
本地导出预览
想要在本地导出预览，需要在vue.config.js中导出的对象中这样配置（也可以直接用UI控制台的configuration配置）：
publicPath: './', // 用于本地打开
outputDir: 'dist' // 输出的文件夹名称
反向代理
调试的时候因为同源策略，往往不能正确访问后端接口，因此需要反向代理。在vue.config.js中导出的对象中这样配置：
devServer: {
proxy: {
'/api': {
target: '[target URL]',
changeOrigin: true
}
}
}
这样，访问本地/api/*的请求会被转发到[target URL]/api/*上。