Scaffolding a Progressive Web App using Vue CLI 3 | Stahlstadt.js

Scaffolding a Progressive Web App using Vue CLI 3 | Stahlstadt.js

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
https://www.youtube.com/watch?v=cKwcZTtF_EU

9b509a6ebaf600e9198dcc3a9a075aa8?s=128

Manuel Wieser

October 09, 2018
Tweet

Transcript

  1. Scaffolding a Progressive Web App using Vue CLI 3 Manuel

    Wieser Stahlstadt.js #18
  2. or My Hero’s Journey with Vue CLI 3 Manuel Wieser

    Stahlstadt.js #18
  3. @manuelwieser | https://manu.ninja/ Manuel Wieser Lead Web Developer karriere.at Lecturer

    Hypermedia User Experience Engineering FH OÖ Campus Hagenberg @manuelwieser https://manu.ninja/
  4. Basics Vue? Vue (/vjuː/) is a progressive framework for building

    user interfaces Vue CLI aims to be the standard tooling baseline for the Vue ecosystem
  5. Installation

  6. @manuelwieser | https://manu.ninja/ Cleanup npm uninstall vue-cli -g # or

    yarn global remove vue-cli
  7. @manuelwieser | https://manu.ninja/ Install npm install -g @vue/cli # or

    yarn global add @vue/cli
  8. Instant Prototyping

  9. @manuelwieser | https://manu.ninja/ Instant Prototyping npm install -g @vue/cli-service-global echo

    "<template>\ <h1>Hallo Stahlstadt.js\!</h1>\ </template>" > App.vue vue serve
  10. @manuelwieser | https://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: 'Hallo Stahlstadt.js!' } }, components: { Greeting } }; </script> <template> <h1>{{ message }}</h1> </template> <script> export default { props: ['message'] } </script>
  12. @manuelwieser | https://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. @manuelwieser | https://manu.ninja/ Creating a Project vue create my-project #

    or vue ui # or npm install -g @vue/cli-init vue init webpack my-project # vue-cli@2.x
  15. @manuelwieser | https://manu.ninja/ 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" }
  16. @manuelwieser | https://manu.ninja/ Plugins vue add @vue/pwa # @vue/cli-plugin-pwa #

    or vue add apollo # vue-cli-plugin-apollo
  17. Presets { "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-pwa": {},

    "@vue/cli-plugin-eslint": { "config": "airbnb", "lintOn": ["save", "commit"] } }, // … // … "router": true, "routerHistoryMode": true, "vuex": true, "cssPreprocessor": "sass" } }
  18. @manuelwieser | https://manu.ninja/ Presets vue create --preset my-preset my-project #

    or vue create --preset username/repo my-project # or vue create --preset my-preset.json
  19. • ~/.vuerc • Git Repository ◦ preset.json ◦ Generator.js (optional)

    ◦ Prompt.js (optional) • Local JSON Presets { "useTaobaoRegistry": false, "presets": { "my-preset": { // … } } }
  20. @manuelwieser | https://manu.ninja/ CLI Service "scripts": { "serve": "vue-cli-service serve",

    "build": "vue-cli-service build" } npx vue-cli-service help
  21. @manuelwieser | https://manu.ninja/ Global CLI Config ˜/.vuerc vue config Target

    Browsers .browserslistrc package.json (browserslist) Project (webpack, Plugins …) vue.config.js package.json (vue) Babel babel.config.js ESLint .eslintrc package.json (eslintConfig) Typescript tsconfig.json Plugins mostly vue.config.js, plugin.config.js or package.json field Configuration
  22. Development

  23. @manuelwieser | https://manu.ninja/ Browser Compatibility • package.json (browserlist) or .browserlistrc

    • @babel/preset-env and PostCSS’ autoprefixer • Polyfills are automatically chosen (per default) • “Modern Mode”
  24. @manuelwieser | https://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
  25. @manuelwieser | https://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>
  26. @manuelwieser | https://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
  27. @manuelwieser | https://manu.ninja/ Static Assets Handling • 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 %>
  28. @manuelwieser | https://manu.ninja/ Static Assets Handling <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">
  29. @manuelwieser | https://manu.ninja/ Working with 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
  30. @manuelwieser | https://manu.ninja/ Working with webpack • vue.config.js • configureWebpack

    option is merged using webpack-merge • chainWebpack option allows total control via webpack-chain
  31. @manuelwieser | https://manu.ninja/ Working with webpack // vue.config.js module.exports =

    { configureWebpack: { plugins: [ new MyPlugin() ], } };
  32. @manuelwieser | https://manu.ninja/ Working with webpack module.exports = { configureWebpack:

    config => { if (process.env.NODE_ENV === 'production') { // You can mutate the config directly … } // … or return an object which will be merged. } };
  33. @manuelwieser | https://manu.ninja/ Working with webpack module.exports = { chainWebpack:

    config => { config .plugin('html') .tap(args => { return [/* … */] }) } };
  34. @manuelwieser | https://manu.ninja/ Working with webpack • 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
  35. @manuelwieser | https://manu.ninja/ Working with webpack vue inspect --rule svg

    { test: /\.(svg)(\?.*)?$/, use: [{ loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } }] }
  36. @manuelwieser | https://manu.ninja/ Environment Variables and Modes .env # loaded

    in all cases .env.local # loaded in all cases, ignored by Git .env.[mode] # loaded in specified mode .env.[mode].local # loaded in specified mode, ignored by Git # .env.[mode].local > .env.[mode] > .env # Variables that exist when Vue CLI is bootstrapped have the highest priority and won’t be overwritten by .env files
  37. @manuelwieser | https://manu.ninja/ Environment Variables and Modes • development is

    used by vue-cli-service serve • production is used by vue-cli-service build / test:e2e • test is used by vue-cli-service test:unit • You can specify your own modes with the --mode flag
  38. @manuelwieser | https://manu.ninja/ Environment Variables and Modes • Only VUE_APP_*

    variables will be statically embedded in your build files ◦ VUE_APP_SECRET=secret ◦ console.log(process.env.VUE_APP_SECRET) ◦ "secret" • NODE_ENV is either "development", "production" or "test" • BASE_URL corresponds to baseUrl in vue.config.js • Variables are available inside public/index.html
  39. @manuelwieser | https://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
  40. @manuelwieser | https://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>
  41. Example

  42. @manuelwieser | https://manu.ninja/ Japanese Phrasebook

  43. @manuelwieser | https://manu.ninja/ Japanese Phrasebook https://www.japanese-phrasebook.com/ master Branch (GitHub) vue-cli-2

    Branch (GitHub) vue-cli-3 Branch (GitHub)
  44. Conclusion 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
  45. Links

  46. @manuelwieser | https://manu.ninja/ Official Documentation • Vue CLI 3 Guide

    • Vue CLI 3 Configuration Reference • Vue CLI 3 Plugin Development Guide
  47. @manuelwieser | https://manu.ninja/ 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
  48. Scaffolding a Progressive Web App using Vue CLI 3 Manuel

    Wieser Stahlstadt.js #18