[前端工具]前端开发工具及环境准备
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语法支持)
- ...
开发环境搭建及工具安装
-
建议通过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
npm start
启动本地开发服务器
npm run ios
将APP运行在iOS设备上，仅仅Mac系统支持，且需要安装Xcode。
npm 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 <engine> 添加样式模板引擎 (less|stylus|compass|sass) (defaults to plain css
--git 添加.gitignore
express/koa <Project_name>创建项目 -
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出来之后都逐渐退出历史舞台。
