Skip to content

Vue

Jump to bottom Edit New page
Henryk Paluch edited this page Mar 7, 2023 · 6 revisions

Vue and Webpack

Quick start and quick install of Vue.

Goal: to understand how Vue works to understand GitLab. Therefore I use:

  • Vue 2.x (GitLab so far uses Vue 2.6.14 (see package.json)
  • Webpack (GitLab uses 4.4.6)

Please note that Vue creators recommend their Vite over Webpack so you should use it.

Standalone App

Because Vue is Client (browser) side framework you can start as simple as with single HTML page, hosted on any static website. Here is index.html example from: https://github.com/vuejs/v2.vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

For Vue 2.x (current version is 3)

Setup

For official development you need node.js (which will be used to concat and optimize assets etc.).

Tested on Debian 11. Following instructions on https://cli.vuejs.org/guide/installation

sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install build-essential
sudo apt-get install npm yarnpkg

Now we will follow https://stackoverflow.com/questions/18088372/how-to-npm-install-global-not-as-root how to install NPM modules and CLI commands without root privileges:

npm config set prefix '~/.local/'
echo 'export PATH=~/.local/bin/:$PATH' >> ~/.bashrc
source ~/.bashrc

Finally we can proceed with installation of vue command using:

npm install -g @vue/cli
vue --version

  @vue/cli 5.0.8

Now we can create first project following https://cli.vuejs.org/guide/creating-a-project:

mkdir -p ~/projects
cd ~/projects
vue create hello-world

# if you want to be GitLab compatible select Vue 2 (default is now Vue 3)

To run we can just follow guide:

cd hello-world/
npm run serve
# to build deployable tree run: npm run build

Tip: you can find all supported npm commands (npm run COMMAND) in package.json

  • using command : 
    jq '.scripts' < package.json
  • which should produce something like: 
    {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

(Please note that GitLab does not use nodejs, but Ruby on Rails, however it is useful to start with simple example).

Ruby on Rails

To also install rails on same machine you can try:

sudo apt-get install ruby-dev libsqlite3-dev
# version took from GitLab's Gemfile.lock
sudo gem install rails -v 6.1.6.1
# yarn required by command "rails new"
npm install --global yarn

Now you can create empty app:

cd ~/projects
rails new hello-rails

To run example project:

cd hello-rails/
bin/rails s

And follow instructions...

To further simulate GitLab we can install Hamlit - faster implementation of Haml

Add to your Gemfile:

# From GitLab v15.6.8-ee
# HAML
gem 'hamlit', '~> 2.15.0'

And run bundle2.7 update

TODO: Convert erb to haml

= Resources

It is not easy to understand when using Vue in SFC (Single File Component) mode (example generated with VUE CLI), where whole component is in *.vue file. It is not as trivial as it looks, because the *.vue has to be compiled into 3 separated parts (output files):

  • <template/> - template that will be build into virtual DOM tree (basically custom JavaScript generator)
  • <script/> - more or less JavaScript code that will be output to .js file
  • <style/> - CSS styles - typically output to .css

This task of processing *.vue to those 3 target is done with so called Vue Loader - you can find very quick intro on:

However we have to understand well both JavaScript, node.js and also WebPack.

I'm currently studying this ToDo list example:

To understand Vue Loader we have to understand also WebPack from:

Copyright © Henryk Paluch. All rights reserved.

Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License

Add a custom sidebar
Clone this wiki locally