VueCli PWA + Vuetify 项目创建指南

随着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/*上。