Hi everyone,
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.
Article Navigation
Section 1
Asdf Install
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
./node_modules/location_of_vue/vue create
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):
git
sudo access
Recommended(zsh)
Coffee or tea
WARNING DO NOT USE
BREWTO INSTALL ASDF IT WAS REPORTED TO HAVE PROBLEMS
So let's start by going home:
cd ~
pwd - confirm that you are in /home/loggedin__user for me it is /home/dan
Now type:
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 havebashzshorfishon Mac
For 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 havebashzshorfishon Linux
For 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 havebashorfish
For 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 havebashorzsh
For 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, type:
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 pac or yay to install as per plugin requirements
Seection 2
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
For Ubuntu:
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 nodejs type:
asdf install nodejs 12.10.0
After installation to make it global(recommended)
asdf global nodejs 12.10.0
or local
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
Install Yarn:
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.
Section 3
Vue-cli
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 @vue/cli@3.5.0
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.
Credits:
https://asdf-vm.com/#/core-manage-asdf-vm
https://github.com/asdf-vm/asdf-nodejs
https://github.com/twuni/asdf-yarn
https://cli.vuejs.org/guide/installation.html
Vue Mastery Github from one of the projects
Top comments (0)