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