前端开发环境搭建

半暖半夏
4,262 阅读3分钟

前端开发环境搭建

  • 安装node.js
    • 官网地址 nodejs.org/en/ 选择操作系统相对应的包下载
    • 一路next，注意尽量不要安装在系统盘。
    • 查看是否安装成功，命令行输入node -v 查看node版本，如下图，表示安装成功
  • 安装npm
    • 下载之前先来了解下npm是什么鬼? npm就是一个node.js的一个包管理工具，它的作用是如果我们在用别人写的代码时，会有一些别人引入的依赖包，如果每一个去下载的话很繁琐，也容易出错。那有了npm的话就方便多了，大家把自己的代码打包放到了npm上，不管你代码存在哪，随时随地都可以下载。其实npm已经在安装node的时候装好的，同上可以查看npm版本 npm -v，如下显示正常
  • git 安装
    • windows系统
      • 下载地址：git-scm.com/downloads 直接从官网下载对应的安装程序
      • 下载后默认安装即可。
      • 安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！
    • mac系统
      • mac系统不能直接下载git，可通过以下方法安装。
        1. 从App Store里面下载XCode。XCode集成了git，不过默认没有安装，需要运行Xcode，选择菜单“Xcode”->“Preferences”，在弹出窗口中找到“Downloads”，选择“Command Line Tools”，点“Install”就可以完成安装了。
        2. 通过homebrew安装
          1. 未安装homebrew需要先安装homebrew，执行 
            /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
          2.通过homebrew安装git，执行 brew install git
    • 验证，如下显示则安装成功!
    • 配置git
      • git config --global user.name "Your Name"
      • git config --global user.email "email@example.com"
    • 创建ssh key 
      ssh-keygen -t rsa -C "emain@example.com"
      因为我以前生成过，所以选择n，如果第一次生成选择y
    • 查看密钥 
      cat .ssh/id_rsa.pub
    • 配置密钥
      1. 复制上面的ssh key
      2. 登录github，添加一个密钥就可以。
    • 验证,输出如下结果表示成功 
      ssh -T git@github.com 
Last login: Sat Jan  6 14:42:55 on ttys000
WMBdeMacBook-Pro:~ WENBO$ ssh -T git@github.com 
Hi wenmobo! You've successfully authenticated, but GitHub does not provide shell access.
WMBdeMacBook-Pro:~ WENBO$
    • 现在就可以正常拉代码运行啦！
      1. 在github上面找一个vue的项目，然后copy图中的路径 执行 git clone + 路径 2.VSCode 打开本地项目，可以直接使用VSCode自带的终端，进入项目目录，然后执行code ./,执行这个命令的前提是要在VSCode中安装插件一个插件，运行 VS code并打开命令面板（ ⇧⌘P ），输入shell command,安装‘code' command in PATH就ok了。
      2. 跑项目，一般看项目的readme文件执行。vue项目大都是先安装依赖，npm install /yarn,然后运行 npm run start / yarn run start。

最近换了新电脑，就安装环境时遇到的问题进行补充说明：

很久之前就采用了node版本管理工具n，只是发现好久没更，所以就此次安装问题一并说明： 在开发项目时可能需要不同的node版本，但是如果按照之前的方式卸载重装非常麻烦，所以需要一个管理node版本的工具，以下就是n的安装方法。

  • 首先基于之前的做法环境中已经安装了一个node，相对应npm也已经被安装了。使用npm全局安装：
sudo npm install n -g

安装后输入n --help出现如下界面表示安装成功

image.png

  • 安装指定版本 n version
  • 如果不知道安装什么版本的话可以通过n ls-remote --all查看所有node版本
  • 使用n lts安装最新版本
  • 安装后可通过n ls查看已安装的所有node版本
  • node版本通过使用n use version进行切换 以上就是一些常用的命令，对于一些其他的命令可通过帮助文档查看使用。

那么这个时候输入node -v就可以查看当前使用的node版本，但是对于一些小伙伴来说他们会遇到如下报错： bad CPU type in executable: node,我们团队小伙伴换了mac mini之后基本都遇到了这个问题，因为大家都是安装和旧电脑一样的版本，导致版本太低当前环境和node版本不兼容导致的。所以切换兼容的版本就行，以下是我自己安装版本：

image.png

** 本文不能涵盖所有情况，仅做参考，感谢支持! **

avatar
文章
阅读
粉丝