VSCODE介绍

我为什么使用VSCODE

我曾经试过sublime、atom、vscode等相对轻量级的开发工具,sublime和atom是比较老牌的前端IDE。
- sublime的体验还是可以的,速度很快,但是现在好像不那么流行了,可能是因为sublime并没有开源,插件数据其实也并不是很多。我用过漫长一段时间的sublime,没觉得有什么不好,当然了,C#也没什么不好但是依然没有java流行,是吧。
- 关于ATOM,atom给我的感觉就是卡,atom其实就是一个javasricpt开发的IDE,运行在V8引擎上面,准确点说是用coffeescript,但是不知道为什么,就是卡卡的,MAC上可能还好点,windows上面就是卡。但是atom的插件非常丰富,基本上你能想到的都有。
- VSCODE,后起之秀,2016年才慢慢风靡起来的前端IDE,微软荣誉出品,一改微软封闭的作风,并且把微软做牛逼IDE的传统继承下来,丝般顺滑,只要内存够大,各种爽翻天。到目前为止,插件也非常丰富,已经可以说是前端IDE的首选了。本身是用typecript写的,对typescript的支持那是一级棒。可以说如果你要使用typescript开发,那vscode是首选。如果你使用angularJS,那么vscode更是首选。

VSCODE插件介绍

  • HTML Snippets
    超级实用且初级的 H5代码片段以及提示

  • HTML CSS Support
    让 html 标签上写class 智能提示当前项目所支持的样式

  • jQuery Code Snippets
    jquery提示及代码片段

  • vscode-icon
    让 vscode 资源树目录加上图标,强迫症患者必备

  • Path Intellisense
    自动路劲补全,默认不带这个功能的

  • Npm Intellisense
    自动提示引用包名称

  • Document this
    注释帮手

  • Project Manager
    多项目快速切换

  • beautify
    代码格式化插件

  • fileheader
    顶部注释模板

其他的美化相关,可以搜索Material、Dracula、One Dark Pro或者直接搜索theme会有很多好看的主题。

后面有不错的插件再来补充。

环境搭建

PS:环境搭建最佳实践,angularJS官方文档地址:https://www.angular.cn/guide/quickstart

搭建环境说明

简介:angularJS为谷歌开发维护的开源的前端框架,AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。我们现在用的为angularJS2.0之后的版本,2.0之后的版本完全不兼容以前的版本,可以基于现阶段最流行的npm开发模式,为现在最流行的前端框架之一。

搭建前提条件:

开始搭建:

  • 全局安装Angular CLI
npm install -g @angular/cli
  • 可以设置npm模式为cnpm,由于一些不可说的原因,某些包是用npm无法安装,因此建议是用cnpm ,命令如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 设置ng的安装包模式为cnpm,本质上ng的安装包模式默认为npm,angluar可以通过命令设置ng的安装包命令为cnpm或者yarn,本文所有的文章现阶段都是用cnpm,因此是用一下命令进行设置:
ng set --global packageManager=cnpm
  • 创建新项目:打开终端窗口,在windows下,在指定文件夹中按住shift再右击菜单,可以在当前窗口打开dos窗口。使用以下命令创建新项目,命令如下:
ng new mysite
  • 等待项目创建完成,时间可能比较长,请耐心等待。
  • 安装完成之后在命令提示符窗口执行:
cd mysite
  • 进入mysite文件夹中,然后执行:
ng serve --open
  • --open为可选参数,表示直接打开浏览器,angular应用启动默认地址为:http://localhost:4200,此刻,你的第一个程序就完成了,效果如下:
  • image

FF14建站进展 - 2017年9月29日

从接手网站前端开发到现在已经接近1个月的时间,完成了以下工作。
  • 页面整体布局及架构部分
  • 文章页列表级明细页
  • 副本列表绑定
剩余的工作大概分为以下几个部分
  • 副本明细
  • 狩猎、采集、制造业相关数据绑定及展现
  • 物品展示列表及插件
  • 其他综合信息的展现

由于工作比较忙,新网站的升级进展稍稍落后于游戏更新。国庆期间,计划将beta版本的4.0攻略站展现给大家,尽请期待。

最后:请大家多多关注现有FF14攻略站,相关链接:     http://www.ffxiv.cn

 

to be continue...

经过2天的折腾,也算是开博完成,使用centOS+lnmp+wordpress建站,虽然踩了一些坑,但是也算是没走太多弯路。

此博客将记录我在前端平台搭建,包括前后端分离、前端框架和后台服务搭建的心路历程及踩坑填坑的经验。

稍微介绍下我自己,IT男,18(????)岁,有个4岁的小儿子,长期从事电力自动化为祖国的工业4.0、中国制造2025愿景而奋斗中(手动滑稽)。

本人现在除了工作,业务时间参与FF14网站的开发建设,https://www.ffxiv.cn,此网站由小伙伴们自发维护,感谢素素,小牛给我个这个机会参与其中。其4.0版本正在制作中。

4.0版本前端使用ng4.0技术栈,严格的前后端分离策略,后面会将建站的经验记录下来,供学习交流用。

继续写我的前端.....

每天都要进步,加油!