[前端开发]前端开发工具及环境准备

SublimeText3编辑器及常用插件

• Sublime3下载
• PackageControl在线安装
       按Ctrl+ `(此符号为tab按键上面的按键) 调出console,复制以下命令置命令行 回车安装，重启Sublime可以在Pereferrence下看到PackageControl选项，

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

• 用PackageControl安装常用Sublime插件（按下Ctrl+Shift+P调出命令面板 ）

  
  
  

  ctrl+shift+p调出命令行窗口.png
  
  

  选择Install Package搜索需要安装的插件，点击安装重启Sublime即可看使用

• Sublime插件推荐
  • Emmet（快速生成HTML代码结构）
  • Alignment（代码快速对齐，选中多行Ctrl+Alt+A）
  • ChineseLocalization（汉化插件）
  • BracketHighlighter（代码高亮）
  • JsFormat（JS格式化）
  • GBK to UTF8（GBK转成UTF8）
  • SublimeCodeintel（代码智能提示）
  • React ES6 Snippets(react es6 语法提示)
  • Vue Syntax Hightlight(Vue语法支持)
  • Less2css(Less语法转换)
  • Scss(scss语法支持)
  • ...

开发环境搭建及工具安装

• Node安装

  建议通过NVM（Node Version Manager）进行安装node,便于版本切换，各平台下Node的安装可自行百度。

• npm源转换（npm install -g cnpm --registry=https://registry.npm.taobao.org）

• Git安装

  Windows:https://git-scm.com/download
  Ubunut: sudo apt-get install git
  MacOS:从AppStore安装Xcode，Xcode集成了Git，不过默认没有安装，你需要运行Xcode，选择菜单“Xcode”->“Preferences”，在弹出窗口中找到“Downloads”，选择“Command Line Tools”，点“Install”就可以完成安装了

• Webpack安装（npm install webpack webpack-dev-server -g）

• Vue脚手架

  npm install vue -g
  npm install --global vue-cli
  创建一个基于 webpack 模板的新项目
  vue init <模板名> <项目名>
  ###模板名可通过vue list命令查看，针对不同的项目要求可选择不同的模板

• React脚手架

  cnpm install -g create-react-app
  create-react-app ReactWebName

• React-Native

  cnpm install -g create-react-native-app
  create-react-native-app ProjectName或者react-native init ProjectName
  cd projectName
  启动本地开发服务器
  react-native run-ios
  将APP运行在iOS设备上，仅仅Mac系统支持，且需要安装Xcode。
  react-native run-android
  将APP运行在Android设备上，需要Android构建工具。

• Node脚手架

  Express
  npm install -g express-generator
  Koa
  npm install koa-generator -g
  express/koa -h 查看帮助
  --ejs 添加ejs模板引擎支持 (默认是 jade)
  --hbs 添加handlebar模板引擎支持
  -c, --css 添加样式模板引擎 (less|stylus|compass|sass)    (defaults to plain css
  --git 添加.gitignore
  express/koa 创建项目

• Supervisor & pm2

  npm install supervisor -g
  通常在上述前端框架脚手架生成的文件下有一个www/bin目录，里面存放的是一些运行脚本，现在只需要supervisor www目录，在我们文件有修改的时候就可以自动再次这行bin目录下的脚本。
  npm install pm2 -g
  程序上线之后如果进程被杀死，通过pm2就可以自动重启服务。

• 其他前端开发环境
          除了上面几个常用的外，还有bower,yarn（facebook推荐取代npm）,gulp，grunt这可自行搜索进行全局安装，比如scss的ruby环境需要安装ruby-installer等环境，less开发的kaola工具，在现在node和webpack出来之后都逐渐退出历史舞台。

前端相关环境搭建推荐

• Tomcat 安装与配置
• Mysql安装与配置
• JDK1.8安装与配置