前端框架

前端框架

1、gulp bower nodejs （PC）
2、webpack + vue + typescript （APP）

运维系统是vue.js、业务系统门户是angularjs。如果选了个react，意味着同时前端三套技术框架在进行。现有人员能hold住吗？没有开发任务还好，有开发任务呢

bower：第三方js库管理器
gulp：用于前端项目的构建，如监控程序文件变化，检查js代码正确性，压缩js,源码转换到发布目录，启动web 服务测试等等。

命令：
0、npm init
1、作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

2、在项目根目录下创建一个名为 gulpfile.js 的文件：

	var gulp = require('gulp');
	gulp.task('default', function() {
	  // 将你的默认的任务代码放在这
	});

3、运行 gulp：

$ gulp

4、bower初始化：

bower init

5、包的安装：

bower install jquery --save

6、包的信息：

bower info jquery

7、包的更新：
直接修改bower.json文件中的jquery版本号如下：

"dependencies": {
	"jquery": "~1.11.3"
}	

然后执行如下命令：

bower update

8、包的查找：
还有一个很重要的功能，就是包的查找，比如我想要安装bootstrap的某个插件，但是记不住名字了，就可以直接在命令行输入：

bower search bootstrap

bower就会列出包含字符串bootstrap的可用包了
9、包的卸载
卸载包可以使用uninstall 命令：

bower uninstall jquery

typescript 安装对应的库文件：npm install @types/jquery @types/bootstrap -save-dev

lite-server：轻量级服务器，安装命令：npm install lite-server --save-dev

concurrently ：可同时运行多条命令，安装命令：npm install concurrently --save-dev

Angular入门之环境搭建（VS code）
1、安装NodeJS
2、安装typescript：npm install -g typescript（全局安装）
3、安装Angular -cli：npm install -g @angular/cli （全局安装）
angular-cli它是angular框架官方的一个构建工具，核心是webpack，以及npm做为依赖包
PS：npm -v 检查npm版本号
tsc -v检查typescript版本号
ng -v检查Angular版本号

4、安装Visual Studio Code
VS code和我们常用的VS压根不是一回事，它只是一个开源的轻量级编辑器，而不是IDE，因为支持typescript语法，且插件功能丰富，所以选择
官网下载正常安装即可，接下来安装几个功能强大的插件：
1、Debugger for Chrome: 必需插件！！用来调试的，后边调试环节详细介绍
2、Angular 2,4 and upcoming latest TypeScript HTML Snippets: 支持Angular2.0+的特性及语法
3、Path Intellisense: 自动路径补全
4、npm Intellisense: 支持在代码中导入npm模块（require方法）时的自动补全
5、Auto Close Tag: 输入开始标签后，自动添加结束标签
6、Auto Rename Tag: 修改html标签时，自动帮你完成尾部闭合标签的同步修改
7、HTML Snippets：提供对HTML语言的支持
8、HTML CSS Support：让 html 标签上写class 智能提示当前项目所支持的样式
9、Bracket Pair Colorizer:给括号加上不同的颜色，便于匹配
10、vscode-icons：给各种文件都加上图标
11、TSLint：TS语法检测
12、beautify : 可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用
13、emoji:可以在代码中加表情，改善心情~

5、创建项目：ng new my-angular2-app
PS：注意这里文件名不可以包含下划线

6、安装webpack：npm install webpack -g