background

Some people install Node.js globally, some people use Node.js 10, some people use CNPM…

Therefore, a front-end development environment installation guide is sorted out and the environment configuration is unified.

At the same time provide an installation script, novice can directly execute the script one-click installation, save time and worry, if you do not care about the installation steps, you can slide the bottom of the “Script Guide” part.

Note That the commands in the following steps are only for Mac operating systems. Errors may occur on Windows operating systems

Installation steps

Install iTerm2

ITerm2 terminal artifact, used by people are good ~

Download the installation package from the official website and follow the steps to install it

If you don’t want to download a new application, ZSH is also a good choice. It is a more sophisticated library with a better theme and built-in commands such as Git, Rake, ruby, etc.

# installation ZSH
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
Copy the code

Install the NVM

NVM is a library for managing versions of Node.js.

Before starting the NVM installation, you need to remove the node.js and NPM packages that were installed globally:

# View modules that are already installed globally so that they can be removed and then re-installed globally with a different node.js version. When you're done, make sure you back up your current global version package, install Node.js using NVM, and then install it back
npm ls -g --depth=0

Delete the global node_modules directory
sudo rm -rf /usr/local/lib/node_modules
Delete node command
sudo rm /usr/local/bin/node
Delete the soft link registered by the global Node.js module
cd  /usr/local/bin && ls -l | grep ".. /lib/node_modules/" | awk '{print $9}'| xargs rm
Copy the code

Start installing NVM:

# command installThe curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bashDownload the installation package and install it (not recommended)
https://github.com/coreybutler/nvm-windows/releases # download address
Copy the code

Then configure the environment variables:

Open the configuration file
vim ~/.zshrc

Copy this to the end of the file, then save and exit
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
Copy the code

Then update the configuration file with the source command:

source ~/.zshrc
Copy the code

You can also restart the terminal to update it.

Then install a node.js version:

Install the specified node.js versionNVM install 16.10.0# use the specified node.js versionNVM use 16.10.0Set the default node.js version
nvm aliasThe default v16.10.0Copy the code

Install the NRM

NRM is an NPM source management library.

npm i nrm -g
Copy the code

If the installation fails, try NPM cache clean –force

Installation of Yarn

You are advised to replace NPM with Yarn.

npm i yarn -g
Copy the code

Install VSCode

VSCode download address

VSCode plugin recommended:

  • Chinese (Simplified) (Simplified Chinese) Language Pack for Visual Studio Code
  • Eslint
  • Vetur: vue.js syntax highlighting
  • GitLens: Code submission record visualization
  • Auto Close Tag: Automatically closes the HTML Tag or component Tag
  • Auto Rename Tag: Automatically Rename labels
  • DotENV: Environment variable configuration file highlighting
  • Vue VSCode Snippets: Vue shortcut syntax, containing JS and HTML code blocks
  • Vscode – ICONS: a library of ICONS that make the VISUAL studio code interface more elaborate
  • Git History: View the commit History
  • Ant Design Vue Helper: Ant Design shortcut syntax based on vue.js
  • Wxml-language Service: wechat applets quick syntax, syntax tips

There are many more useful plug-ins, but I won’t list them here.

Install one by one is also quite troublesome, the above plug-ins I have integrated into a plug-in package, only need to install a plug-in, welcome to download the use of: wy-VScode-kit VScode plug-in package

Script Usage Guide

The above steps are written as shell scripts, which only need to be executed when installing the environment. GitHub address of the script

Note That this script applies only to the Mac operating system and is applicable to the reinstallation environment or the first installation. Errors may occur in other scenarios

Directory description

.Bass Exercises ─ readme.md Bass Exercises ─ install.sh# Environment installation script├ ─ ─ restore. ShUninstall. sh: uninstall.sh└ ─ ─ uninstall. ShUninstall existing environment dependencies
Copy the code

use

# cloning
git clone [email protected]:wytxer/web-env-install.git

cd web-env-install

# Uninstall existing dependencies
sh ./uninstall.sh

# install dependencies
sh ./install.sh

# recovery
sh ./restore.sh
Copy the code

Code and documentation

GitHub address of the installation script