搭建一个ubuntu系统的前端开发环境[亲测有效]

搭建一个ubuntu系统的前端开发环境[亲测有效]引言:最近在公司一直用自己的Mac book进行开发工作,公司的windows主机不知怎么的无法运行 eggjs框架的web项目(简单的demo项目可以运行,但目前正在开发的项目无法运行)很是无奈,索性将主机直接安装ubuntu系统,差不多和Windows系统说88了。 大家去…

搭建一个ubuntu系统的开发环境

引言:最近在公司一直用自己的Mac book进行开发工作,公司的windows主机不知怎么的无法运行 eggjs框架的web项目(简单的demo项目可以运行,但目前正在开发的项目无法运行)很是无奈,索性将主机直接安装ubuntu系统,差不多和Windows系统说88了。 下面我分享一下搭建过程:

安装Ubuntu系统

  1. 下载系统镜像,制作U盘引导 ubuntu系统选择的是目前最新的稳定版20.04, 制作U盘引导的系统是MacOS Big Sur 11.1 大家去官网下载吧,我这里就不上链接了。
    1. 将 ubuntu-20.04.1-desktop-amd64.iso镜像文件转为 ubuntu.dmg
hdiutil convert -fomat UDRW -o ubuntu.dmg ubuntu-20.04.1-desktop-amd64.iso
    1. 安装系统时,建议选择英文操作系统,这样能避免中文文件夹,避免在terminal中无法输入中文,而无法进入相应文件夹的尴尬,。
    1. 系统安装完成后,因为我是在公司的网络环境,得设置静态IP地址,配置网关等信息,不然无法联网,没有这方面限制的亲可以略过本步骤。 ps: vi 对ubuntu小白非常非常不友好,需要自己仔细看一下vi的基本操作,我这里只提供一些应急的操作提示:
  • 默认命令模式下光标移动: h j k l
  • 光标后开始追加文字,并进入编辑模式: a
  • 光标前开始插入文字,并进入编辑模式: i
  • 想删除内容:先按ESC键退出编辑模式,再移动光标至想删除的字母位置,再按del键进行删除
  cd /etc/netplan
  ll
  vi  01-network-manager-all.yaml

内容如下,IP地址找问运维小哥要吧: 搭建一个ubuntu系统的前端开发环境[亲测有效]

  • 4. 系统安装完成后,修改apt源,并应用:
  sudo vi /etc/apt/sources.list

cn.archive.ubuntu.com/ubuntu/ 替换为国内可用的apt源, 我用的是 mirrors.163.com/ubuntu/ 搭建一个ubuntu系统的前端开发环境[亲测有效] 修改保存退出后,记得apply使配置立即生效:

  sudo netplan apply

ps:上图为安装vim后优化的显示效果,安装vim的命令如下:

  sudo apt-get install vim-gtk
  1. 设置系统语言和中文输入法 将系统语言改为中文,在应用到全局时,系统会弹出是否变更Documents、Dowloads等名称是否改为中文的操作提示,选择不。文件夹、路径名称为中文时,在terminal中想进入中文路径时非常不方便,所以还是保持英文的更好。

设置语言就不多说了,大家百度吧,我就贴一张图片意思一下,另外我的中文输入法装的是搜狗的,它的安装帮助很清晰,亲测可用。 搭建一个ubuntu系统的前端开发环境[亲测有效]

  1. 安装通讯软件

配置开发环境

    1. git
sudo apt install git-all
    1. Visual Studio Code Ubuntu Software中就有,直接安装就行
    1. chrome
cd /Downloads
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome*; sudo apt-get -f install 

安装

sudo apt-get install nodejs
sudo apt-get install npm

升级、node版本切换

sudo npm install npm -g
npm install –g n
n latest    #(升级node.js到最新版)npm config set registry http://registry.npm.taobao.org/
n stable #(升级node.js到最新稳定版)

替换npm镜像

#得到原本的镜像地址
npm get registry 
#设成淘宝的
npm config set registry http://registry.npm.taobao.org/
#换成原来的
npm config set registry https://registry.npmjs.org/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/13182.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注