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