Today I wanted to write a guide on how to set up
Vue CLI real quick and also help everyone to follow more easily Vue Mastery event for this weekend.
If you didn't read about it and would like to participate click this event link.
Before we start this guide please read this(Important)
This guide will work only for Mac and Linux. You can also use a VM for Linux
asdf has a problem if you uninstall a global package with yarn or npm so if you install something globally don't remove it.
Wait, a second Wolfiton?!, What is a global package?
A global package is code created by someone else or by yourself that contains functions, classes, methods, cli-tools, that you can use in your without the need to specify where this package is located.
An example would be:
vue create - can be used directly if installed globally.
if it is installed locally you need to generate a project with yarn or npm then type:
yarn add @vue/cli
As you can see Dear Reader a lot more work and complication
Back to our article, we are going to follow the official docs from asdf.
The docs can be found here asdf docs
Required(you will need):
Coffee or tea
WARNING DO NOT USE
BREWTO INSTALL ASDF IT WAS REPORTED TO HAVE PROBLEMS
So let's start by going home:
pwd - confirm that you are in
/home/loggedin__user for me it is
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.7.7
The instructions below apply for different terminals you may have please read carefully , if you are unsere what to follow ask in the comments for help.
Only if you have
bashon Linux installed follow the instructions below, don not follow them if you have
bash users on Linux type the following(only for bash terminals on Linux):
echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bashrc echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc
Only if you have
bashon Mac installed follow the instructions below, don not follow them if you have
bash users on Mac type the following(only for bash terminals on Mac):
echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bash_profile echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bash_profile
Note if you are using Catalina or newer, the default shell has changed to Zsh follow the zsh instruction instructions.
Only if you have
zshinstalled follow the instructions below, don not follow them if you have
zsh users in general(both Linux or Mac)
echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.zshrc
Only if you have
fishinstalled follow the instructions below, don not follow them if you have
fish users (both Linux or Mac)
echo 'source ~/.asdf/asdf.fish' >> ~/.config/fish/config.fish mkdir -p ~/.config/fish/completions; and cp ~/.asdf/completions/asdf.fish ~/.config/fish/completions
After you followed the intructions for your terminal we should now have dear reader asdf installed.
So close the terminal and open it up again.
Now if we type zsdf we should see the following output:
version: v0.7.7-4b2b71a MANAGE PLUGINS asdf plugin add <name> [<git-url>] Add a plugin from the plugin repo OR, add a Git repo as a plugin by specifying the name and repo url asdf plugin list [--urls] [--refs] List installed plugins. Optionally show git urls and git-ref. asdf plugin list all List plugins registered on asdf-plugins repository with URLs asdf plugin remove <name> Remove plugin and package versions asdf plugin update <name> [<git-ref>] Update a plugin to latest commit or a particular git-ref. asdf plugin update --all Update all plugins MANAGE PACKAGES asdf install [<name> <version>] Install a specific version of a package or, with no arguments, install all the package versions listed in the .tool-versions file asdf uninstall <name> <version> Remove a specific version of a package asdf current Display current version set or being used for all packages asdf current <name> Display current version set or being used for package asdf where <name> [<version>] Display install path for an installed or current version asdf which <command> Display the path to an executable asdf shell <name> <version> Set the package version in the current shell asdf local <name> <version> Set the package local version asdf global <name> <version> Set the package global version asdf list <name> List installed versions of a package asdf list all <name> List all versions of a package UTILS asdf exec <command> [args..] Executes the command shim for current version asdf env <command> [util] Runs util (default: `env`) inside the environment used for command shim execution. asdf reshim <name> <version> Recreate shims for version of a package asdf shim-versions <command> List on which plugins and versions is command available asdf update Update asdf to the latest stable release asdf update --head Update asdf to the latest on the master branch "Late but latest" -- Rajinikanth
For Mac we will need the following packages to be installed using
spack install \ coreutils automake autoconf openssl \ libyaml readline libxslt libtool unixodbc \ unzip curl
*For Ubuntu * type:
sudo apt install \ automake autoconf libreadline-dev \ libncurses-dev libssl-dev libyaml-dev \ libxslt-dev libffi-dev libtool unixodbc-dev \ unzip curl
For Fedora type:
sudo dnf install \ automake autoconf readline-devel \ ncurses-devel openssl-devel libyaml-devel \ libxslt-devel libffi-devel libtool unixODBC-devel \ unzip curl
For Arch you will have to use
yay to install as per plugin requirements
Install Node Yarn
We can list all the plugins that are available for asdf like this:
asdf plugin list all - if you run this command the list will be quite big.
So let's do it like this:
asdf plugin list all | grep "nodejs" nodejs *https://github.com/asdf-vm/asdf-nodejs.git
Perfect now we can follow the link and install nodejs, let's do that.
For Mac let's use spack:
spack install coreutils gpg
sudo apt-get install dirmngr gpg
Everybody does the below commands
asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
To see all the version of node that can be installed type:
asdf list all nodejs
Now to install
asdf install nodejs 12.10.0
After installation to make it global(recommended)
asdf global nodejs 12.10.0
asdf local nodejs 12.10.0
Differences between local and global you can use a different nodejs version as per project. With global you have only one nodejs version that is used by all projects.
To verify we type:
node --version v12.10.0 npm -v 6.10.3
To get yarn ewe do the same, so type:
asdf plugin list all | grep "yarn" yarn *https://github.com/twuni/asdf-yarn.git
asdf plugin-add yarn
asdf list all yarn
asdf install yarn 1.20.0
asdf global yarn 1.20.0
Veirfy that yarn is installed by typing:
yarn --version 1.20.0
Good yarn is ready.
To install vue-cli globally(recommended) use:
yarn global add @vue/cli
To install the version used by Vue Mastery courses from what I could see
yarn global add @email@example.com
We are done Dear Reader
I hope you enjoyed the tutorial and explanations.
If you do like the article share it on social, to help others as well.
Vue Mastery Github from one of the projects