How to start Vue project with M1 pro chip

introduction

I bought a MacBook Pro with m1 pro during the Singles Day shopping spree. All the environments need to be set up again. The backend project is relatively easy, I can just install idea and start it. I am not very familiar with the frontend Vue, so I did some research, built the environment and started Vue.

Install Homebrew

Homebrew is a great tool for managing software installation on Mac, so I installed Homebrew as soon as I got the Mac. The installation may fail due to network reasons. The following command can be used to use a domestic mirror, which makes the installation faster.

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

After entering 1, follow the prompts to install it step by step.

Install nvm

Nvm is a tool for managing Node versions. When there are more projects, you will always need to switch the Node environment, so it is recommended that you use Nvm to install Node. It can be installed by the following command.

brew install nvm

After the installation is complete, you need to configure the environment variables. Edit the .bash_profil configuration file using the command below.

vi ~/.bash_profile

Write the following configuration script into the file.

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" # This loads nvm

After writing, you need to make the configuration take effect. Execute the following command.

source ~/.bash_profile

Install Node

Next, install Node through nvm. The node version adapted to the M1 pro chip is v15.

nvm i v15

After the command is run, it will take a long time to compile node. Please be patient. It will take about 5-10 minutes and then you will be prompted that the installation is successful. One more reminder: if you report any error, first check whether it is a network problem, such as 443, connect timeout, etc.

Installation completed

At this point, the construction of git+homebrew+Node+npm has been completed. Next, you can execute the npm install and npm run ... commands locally to start the front-end Vue project and access it normally.

npm package installation failed: You can install the required dependencies by modifying the domestic image. After successfully executing the following code, you can execute npm install to download dependencies and start the project normally. It has been tested and is effective.

npm config set registry https://registry.npm.taobao.org
npm info underscore

This concludes this article about the steps to start the Vue project with the M1 pro chip. For more information about starting Vue with M1 pro, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!