Set up a Vue web development environment using Deepin

⚠️ WARNING

Do NOT use the sudo su command on the terminal, doing so will mess with the node files that are needed to run in your Deepin distro and this guide will not work.

Update the system then run the following commands to remove old versions of Node and avoid potential problems in our fresh install.

sudo apt update

sudo apt upgrade

sudo apt-get purge --auto-remove nodejs

node -v

command 'node' not found but can be installed with sudo apt install nodejs

Install git

sudo apt install git

git --version

Link your git to your github repo, more details here.

git config --global user.email "your_email@example.com"

git config --global user.name "spongebob"

Install curl using the github repo below then install the Node Version Manager

sudo apt install curl

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

❗	CLOSE and REOPEN the terminal before proceeding to the next steps.

Check what Node Version Manager is installed to confirm that the installation was successful.

nvm --version

0.38.0

By the time of this writing, 0.38.0 was the latest version

Check what Node Version Manager Long Term Support is available then install it using the commands below.

nvm ls-remote

nvm install --lts

Installing latest LTS version. v16.17.0 is already installed. Now using node v16.17.0 (npm v8.19.2)

By the time of this writing, in Sept, 2022, these were the most updated versions so yours might be different if you are reading this guide from the future.

Install the LTS or Long Term Support version of NVM.

nvm use --lts

Now using node v16.17.0 (npm v8.19.2)

Installing the LTS version is more stable and less prone to bugs

Start your Vue project using the Vite build tool

npm create vite@latest

After following the Vite set up on the terminal your terminal should have a similar output below among other strings of text

➜ Local: http://localhost:5173/

❗	If your default browser has not pulled up a webpage showing a Vue + Vite page, simply press ctrl button on your keyboard and the left mouse button on the local host link like the one above (http://localhost:5173/). This will open up the Vue + Vite webpage on your default browser.

While the Vue + Vite starter page is running, find your project file, right click and open with VS Code to start coding

or

Click the button on the same terminal to create another tab, then type the command below to open VS Code in the same file that you created.

code .

To exit the terminal type the command below

exit

Done!

Congratulations. 🎉

---

💡 To open your project file again, find the folder and then right click -> open with -> Visual Studio Code then type the command below on your Visual Studio Code terminal.

npm run dev

---

🪲 🪲 🪲 🪲 🪲 🪲 🪲 🪲 🪲 🪲 🪲

Potential problems:

Node and npm still showing after uninstalling it with the commands.

sudo apt-get purge --auto-remove nodejs.

Solution:

nvm deactivate

nvm uninstall 16.17.0 

This command will force NVM to uninstall the Node JS version that you installed along with NPM, in our case it is the Node JS version 16.17.0. The command below deletes both Node JS and NPM from your system.