Edward's Tech Site

this site made with Next.js 13, see the code

FORAY: Sep 16, 2020 - vuejs
Install Vue.js 3.x Preview (2020-09) and look for Webpack
  • wk
  • install latest version of Vue CLI 4.x
    • vue -V --> 2.9.6
    • npm i -g @vue/cli (4 minutes)
    • vue -V --> 2.9.6
    • npm un -g @vue/cli (says up to date)
    • npm uninstall -g @vue/cli (says up to date)
    • found:
      • Warning regarding Previous Versions: The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.
    • npm unintsall -g vue-cli
    • vue -V --> no such file
    • npm i -g @vue/cli
    • vue -V --> 4.5.6
  • create Vue project
    • in apps directory
    • vue create vuetest44
      • Manually select features
      • chose all
        • Babel
        • TypeScript
        • PWA
        • router
        • Vuex
        • CSS Pre-processors
        • Linter / Formatter
        • Unit Testing
        • E2E Testing
      • Chose 3.x preview over 2.x
        • The official release is planned in Q3 2020
      • chose class-style component syntax (default is no)
        • readability
        • TypeScript friendly
        • can use vuex-class
        • officially maintained
      • use Babel alongside TypeScript --> yes
      • use history mode for browser --> yes
      • chose dart-sass over node-sass
        • Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation
        • being done in pure javascript, dart-sass works way better than node-sass for cross-platform compability
      • chose default: ESLint with error prevention only (not Airbnb)
      • Lint on save
      • Mocha + Chai (default)
      • Cypress (Chrome only) - default
      • Babel, ESLint etc. in dedicated config files (not package.json)
      • (takes about 10 minutes to install - spends quite a bit of time on Cypress)
  • run project
    • open VSCode in vuetest44
    • (node_modules already built)
    • npm run serve
      • says Starting development server...
    • vuetest22 ("vue": "^3.0.0-0") and vuetest44 ("vue": "^3.0.0-0") have similar folder structtures
  • as comparison, installing a vue 2.x project:
    • vue create vuetest66
    • manually select
    • all options
      • Babel
      • TypeScript
      • PWA
      • router
      • Vuex
      • CSS Pre-processors
      • Linter / Formatter
      • Unit Testing
      • E2E Testing
    • 2.x
    • class-style component syntax (default Y this time, on 3.x it was N), I chose yes
    • "vue": "^2.6.11",
  • regarding Webpack
    • vuetest22 - @vue/cli4, 3.x - few options - 3.0.0
    • vuetest44 - @vue/cli4, 3.x - all options - 3.0.0
    • vuetest66 - @vue/cli4, 2.x - all options - 2.6.11
    • apparently: "the vue-cli-service serve command starts a dev server which is: based on webpack-dev-server that comes with Hot-Module-Replacement (HMR) working out of the box"; "For using webpack you need to use something like vue init webpack your-project"
  • creating a vue that actually has webpack in it
    • vue init webpack vuetest77
    • it responds:
      • Command vue init requires a global addon to be installed.
        Please run npm install -g @vue/cli-init and try again.
    • npm install -g @vue/cli-init
    • again: vue init webpack vuetest77
      • runtime + compiler (default)
      • install vue-router (default)
      • ESLint
        • standard
      • tests Jest (default)
      • e2e with Nightwatch --> yes
      • use NPM
    • npm start starts webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    • shows same Vue start page
    • it didn't have git initialized