Scaffolding a Progressive Web App using Vue CLI 3 | webclerks

Scaffolding a Progressive Web App using Vue CLI 3 | webclerks

Vue CLI 3 has been released and it’s completely different from its previous version. Discover how it simplifies your toolchain, reduces configuration fatigue and improves your developer experience.

https://manu.ninja/scaffolding-a-progressive-web-app-using-vue-cli-3

9b509a6ebaf600e9198dcc3a9a075aa8?s=128

Manuel Wieser

November 14, 2018
Tweet

Transcript

  1. Scaffolding a Progressive Web App using Vue CLI 3

  2. Manuel Wieser | @manuelwieser | manu.ninja Manuel Wieser Lead Web

    Developer karriere.at Lecturer Hypermedia User Experience Engineering FH OÖ Campus Hagenberg @manuelwieser manu.ninja
  3. Topics Vue? Vue CLI? Installation Instant Prototyping Creating a Project

    What’s in a Project? Vue CLI Plugins Configuration Building
  4. Vue (/vjuː/) is a progressive framework for building user interfaces

  5. Vue CLI is a tool for scaffolding Vue projects full

    system for rapid Vue development
  6. Installation

  7. Manuel Wieser | @manuelwieser | manu.ninja Installation npm uninstall -g

    vue-cli npm install -g @vue/cli vue --version vue --help
  8. Instant Prototyping

  9. Manuel Wieser | @manuelwieser | manu.ninja Instant Prototyping npm install

    -g @vue/cli-service-global echo "<template>\ <h1>Hello webclerks\!</h1>\ </template>" > App.vue vue serve
  10. Manuel Wieser | @manuelwieser | manu.ninja • vue serve uses

    the same default setup (webpack, Babel, PostCSS, ESLint) as projects created by vue create • Entry can be main.js, index.js, App.vue or app.vue … • You can provide an index.html, package.json, use local dependencies, or add config files for Babel, PostCSS and ESLint Instant Prototyping
  11. Instant Prototyping <template> <Greeting :message="message"/> </template> <script> import Greeting from

    './Greeting.vue'; export default { data() { return { message: Hello webclerks!' } }, components: { Greeting } }; </script> <template> <h1>{{ message }}</h1> </template> <script> export default { props: ['message'] } </script> Greeting.vue App.vue
  12. Manuel Wieser | @manuelwieser | manu.ninja Instant Prototyping vue build

    dist ├── index.html └── js ├── app.fbe6ce0a.js ├── app.fbe6ce0a.js.map ├── chunk-vendors.aa4f98a5.js └── chunk-vendors.aa4f98a5.js.map
  13. Creating a Project

  14. Manuel Wieser | @manuelwieser | manu.ninja Creating a Project vue

    create my-project npm install -g @vue/cli-init vue init webpack my-project # vue-cli@2.x vue ui
  15. Presets { "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": {

    "config": "airbnb", "lintOn": ["save", "commit"] } }, // … // … "router": true, "routerHistoryMode": true, "vuex": true, "cssPreprocessor": "sass" } }
  16. Manuel Wieser | @manuelwieser | manu.ninja Presets vue config vue

    create --preset my-preset my-project # --preset my-user/my-repository # --preset my-preset.json
  17. What’s in a Project?

  18. Manuel Wieser | @manuelwieser | manu.ninja What’s in a Project?

    ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── main.js
  19. Manuel Wieser | @manuelwieser | manu.ninja Vue CLI Plugins "dependencies":

    { "vue": "^2.5.17" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.3", "@vue/cli-plugin-eslint": "^3.0.3", "@vue/cli-service": "^3.0.3", "vue-template-compiler": "^2.5.17" }
  20. Manuel Wieser | @manuelwieser | manu.ninja CLI Service "scripts": {

    "serve": "vue-cli-service serve", "build": "vue-cli-service build" } npx vue-cli-service help
  21. Configuration "eslintConfig": {...}, "postcss": {...}, "browserslist": [ "> 1%", "last

    2 versions", "not ie <= 8" ] module.exports = { presets: [ '@vue/app', ], }; package.json babel.config.js
  22. Vue CLI Plugins

  23. Manuel Wieser | @manuelwieser | manu.ninja Plugins vue add @vue/pwa

    # @vue/cli-plugin-pwa vue ui vue add apollo # vue-cli-plugin-apollo
  24. Manuel Wieser | @manuelwieser | manu.ninja Changes? ├── package-lock.json ├──

    package.json ├── public │ ├── img │ │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── ... │ ├── manifest.json │ └── robots.txt └── src ├── main.js └── registerServiceWorker.js
  25. Configuration module.exports = { pwa: { name: 'Japanese Phrasebook', themeColor:

    '#f44336', msTileColor: '#f44336', workboxOptions: {...} } }; cacheId: 'phrasebook', importWorkboxFrom: 'local', navigateFallback: 'shell.html', navigateFallbackWhitelist: [/^((?!\/404).)*$/] vue.config.js workboxOptions
  26. Official Plugins • @vue/cli-plugin-babel • @vue/cli-plugin-typescript • @vue/cli-plugin-eslint • @vue/cli-plugin-pwa

    • @vue/cli-plugin-unit-jest • @vue/cli-plugin-unit-mocha • @vue/cli-plugin-e2e-cypress • @vue/cli-plugin-e2e-nightwatch
  27. Manuel Wieser | @manuelwieser | manu.ninja Plugin Development

  28. Configuration

  29. Manuel Wieser | @manuelwieser | manu.ninja HTML • public/index.html is

    processed with html-webpack-plugin ◦ Variables (<link rel="icon" href="<%= BASE_URL %>favicon.ico">) ◦ JavaScript/CSS ◦ preload/prefetch hints (@vue/preload-webpack-plugin) ◦ manifest/icon links (@vue/cli-plugin-pwa) • Multi-Page Application ◦ pages option in vue.config.js
  30. Manuel Wieser | @manuelwieser | manu.ninja CSS • Preprocessors are

    preconfigured, you just have to install the webpack loaders (hasn’t changed from Vue CLI 2) ◦ npm install -D sass-loader node-sass • PostCSS ◦ Can be configured via any of its configuration file options or css.loaderOptions.postcss in vue.config.js • Support for CSS Modules
  31. Manuel Wieser | @manuelwieser | manu.ninja webpack Configuration • vue.config.js

    • configureWebpack option is merged using webpack-merge • chainWebpack option allows total control via webpack-chain
  32. Manuel Wieser | @manuelwieser | manu.ninja webpack Configuration module.exports =

    { configureWebpack: { plugins: [ new MyPlugin() ], } }; vue.config.js
  33. Manuel Wieser | @manuelwieser | manu.ninja webpack Configuration module.exports =

    { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // You can mutate the config directly … } // … or return an object which will be merged. } };
  34. Manuel Wieser | @manuelwieser | manu.ninja webpack Configuration module.exports =

    { chainWebpack: config => { config .plugin('html') .tap(args => { return [/* … */] }) } };
  35. Manuel Wieser | @manuelwieser | manu.ninja Assets • Relative Path

    Imports ◦ JavaScript/CSS imports, HTML/CSS references ◦ file-loader/url-loader ◦ Assets Images < 4 KB are inlined ◦ Filenames include content hashes (for cache-busting) • public Folder ◦ You may have to prefix your links with <%= BASE_URL %>
  36. Manuel Wieser | @manuelwieser | manu.ninja Assets <img src="./assets/logo.svg" alt="Logo">

    <!-- becomes --> <img src="./assets/logo.ec9a16c8.svg" alt="Logo"> <img src="./assets/logo.svg" alt="Logo"> <!-- becomes (after modifying default config) --> <img src="data:image/svg+xml;base64,..." alt="Logo">
  37. Manuel Wieser | @manuelwieser | manu.ninja webpack Inspection • You

    can print the resolved webpack config for inspection ◦ vue inspect ◦ vue inspect --help • You can use the resolved webpack config as a file (for IDEs or CLI tools) ◦ <projectRoot>/node_modules/@vue/cli-service/webpack.config.js
  38. Manuel Wieser | @manuelwieser | manu.ninja webpack Configuration vue inspect

    --rule images vue inspect --rule svg
  39. Manuel Wieser | @manuelwieser | manu.ninja webpack Configuration module.exports =

    { chainWebpack: (config) => { config.module.rules.delete('svg'); config.module.rule('images') .test(/\.(svg|png|jpe?g|gif|webp)(\?.*)?$/); }, }; vue.config.js
  40. Building

  41. Manuel Wieser | @manuelwieser | manu.ninja Browser Compatibility • package.json

    (browserlist) or .browserlistrc • @babel/preset-env and PostCSS’ autoprefixer • Polyfills are automatically chosen (per default) • “Modern Mode”
  42. Manuel Wieser | @manuelwieser | manu.ninja Browser Compatibility vue-cli-service build

    --modern dist/js ├── [5.2K] app-legacy.3a1db1b0.js ├── [5.1K] app.053009ed.js ├── [ 80K] chunk-vendors-legacy.bb3a6f6d.js ├── [ 63K] chunk-vendors.c571e522.js
  43. Manuel Wieser | @manuelwieser | manu.ninja Browser Compatibility <head> <link

    href=/js/app.8c81428a.js rel=modulepreload as=script> <link href=/js/chunk-vendors.78830d76.js rel=modulepreload as=script> </head> <body> <script type=module src=/js/chunk-vendors.78830d76.js></script> <script type=module src=/js/app.8c81428a.js></script> <script src=/js/chunk-vendors-legacy.c19c13a2.js nomodule></script> <script src=/js/app-legacy.243e8169.js nomodule></script> </body>
  44. Manuel Wieser | @manuelwieser | manu.ninja Build Targets • App

    • Library ◦ Vue is externalized, falls back to global Vue if it can’t be resolved through the bundler ◦ CommonJS, UMD, ES Modules (not yet) • Web Component ◦ Vue is externalized, assumes global Vue is available on the host page ◦ Single JavaScript file (everything inlined) that registers a custom element
  45. Manuel Wieser | @manuelwieser | manu.ninja Build Targets vue build

    --target wc --name my-footer 'src/components/Footer.vue' dist/my-footer.min.js 16.55 kb 7.53 kb dist/my-footer.js 43.70 kb 12.46 kb <script src="https://unpkg.com/vue"></script> <script src="./my-footer.js"></script> <my-footer></my-footer>
  46. Example

  47. Manuel Wieser | @manuelwieser | manu.ninja Japanese Phrasebook

  48. Manuel Wieser | @manuelwieser | manu.ninja Japanese Phrasebook https://www.japanese-phrasebook.com/ master

    Branch (GitHub) vue-cli-2 Branch (GitHub) vue-cli-3 Branch (GitHub)
  49. Conclusion

  50. Vue CLI 3 Official plugins for Babel, TypeScript, ESLint, PostCSS,

    PWAs, Unit Testing and E2E Testing Compose your project out of plugins instead of selecting from a few pre-defined templates No need to “eject”, so your project can benefit from bugfixes and updates to plugins Fancy GUI Instant Prototyping Ship your code as native ES2015+ or convert your Vue components to Web Components
  51. Manuel Wieser | @manuelwieser | manu.ninja Official Documentation • Vue

    CLI 3 Guide • Vue CLI 3 Configuration Reference • Vue CLI 3 Plugin Development Guide
  52. Scaffolding a Progressive Web App using Vue CLI 3 Manuel

    Wieser webclerks #15