MacBook Pro M1 前端环境搭建

MacBook Pro M1 前端环境搭建

第一步 安装命令行管理工具（Command Line Tools）

注：先执行第二步，若提示需要安装命令行管理工具，则执行该步骤

经测试若不需要xcode工具，可只安装command line tools

利用 sudo xcode-select --install 安装“命令行管理工具（command line tools）”，

根据提示安装

安装完成后，不要在执行 sudo xcode-select --install

参考链接：https://www.cnblogs.com/huangenai/p/9887821.html

第二步 安装nvm

说明：nvm node版本管理工具

运行命令
sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

进入.nvm文件夹下
文件路径：/Users/Mac的用户名/目录(.nvm)
若没看到.nvm文件夹，可能是被隐藏了，可使用备注的命令

创建配置文件
touch .bash_profile

打开编辑配置文件
open .bash_profile

执行
source ~/.nvm/.bash_profile

备注：
显示隐藏的文件：defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder
隐藏隐藏的文件：defaults write com.apple.finder AppleShowAllFiles No && killall Finder

第三步 使用nvm安装node

运行命令
nvm install v15.9.0 // v15.9.0 为node的版本号

遇到困难：
1.电脑关机后，在打开nvm、node、npm命令失效
主要是nvm命令失效
解决方案:
/Users 文件夹下编辑.zshrc文件(若没有，则创建touch .zshrc)

添加配置信息
source ~/.nvm/.bash_profile
export PATH

第四步 安装Vs Code

vs code安装简单，官网下载稳定版即可。

安装vue相关插件

序号	名称	描述
1	HTML Snippets	html代码片段
2	HTML CSS Support	css智能提示
3	vscode-icons	文件图标
4	Path Intellisense	自带路径补全
5	Npm Intellisense	require 时的包提示
6	ESLint	自动格式化
7	Vetur	vue文件的语法高亮显示
8	Vue
9	Vue 2 Snippets	Vue2 片段补全工具
10	Vue VSCode Snippets	.vue文件骨架快捷语法构建工具
11	Chinese (Simplified) Language Pack for Visual Studio Code	中文

第五步 安装Vue脚手架

运行命令
sudo npm install -g @vue/cli

第六步 安装yarn命令

运行命令
npm install -g yarn

参考链接

1.https://www.jianshu.com/p/d50f3f2a97f1

2.https://blog.csdn.net/u012843349/article/details/112856593

3.https://blog.csdn.net/cc1991_/article/details/109726937