前端框架前端工具 PWA介绍 node使用介绍 - WEB前端

一、前端框架

前端框架：

1、Angular，功能非常齐全的前端框架，适合构建动态的单页网络应用，Angular由谷歌开发维护；

2、Vue，简单轻便易上手的前端框架，ViewUI和Ant Design是Vue的2种组件库，推荐使用ViewUI；

前端图形框架：

1、SVG，HTML5标记，通过XML描述2D矢量图，支持事件处理；

2、Canvas，HTML5标记，通过Javascript绘制2D图形，不支持事件处理；

3、WebGL，基于Javascript的3D绘图标准；

二、前端工具

原型工具：

1、摹客，适合简单web原型；

2、墨刀，适合简单app原型；

3、Axure，专业原型软件；

开发工具：

1、VSCode，Visual Studio Code，微软公司开发的跨平台源代码编辑器，支持Windows、Linux、macOS；

2、WebStorm，JetBrains公司旗下一款JavaScript开发工具，最强大的前端开发工具；

三、PWA介绍

PWA，Progressive Web Apps，渐进式Web应用在桌面和移动设备上提供接近原生应用的体验，直接通过Web进行构建和交付，它们是快速、可靠的Web应用，谷歌在2015年开始着手推广。

四、node使用介绍

1、node是基于Chrome V8引擎的JavaScript运行时环境；

2、npm是node的包管理工具，npm查找帮助npm help command；

3、nvm是node的版本管理工具，下载地址：https://github.com/coreybutler/nvm-windows/releases

6、^ver，允许修改次版本号，版本号最左边的非零数字不允许修改；

7、~ver，允许修改补丁版本，次版本号存在时只允许修改补丁版本；

8、package.json项目依赖配置文件，package-lock.json锁定项目依赖到具体版本；

9、dependencies开发和运行时都依赖，devDependencies只在开发时依赖；

10、在线搜索依赖：https://npmmirror.com

11、webpack是前端打包工具，HtmlWebpackPlugin可以定义变量，然后在Html文件引用；

12、Html引用变量语法：<%= htmlWebpackPlugin.options.path %>

配置文件：.npmrc

查看源：npm config get registry

设置源：npm config set registry https://registry.npmmirror.com/

还原源：npm config set registry https://registry.npmjs.org/

安装模块：npm install，目录下面必须存在文件package.json；

安装模块：nmp install module@version，模块版本信息会被写到package.json；

卸载模块：nmp uninstall module，模块版本信息会从package.json删除；

更新模块：npm update module

安装全局模块：npm install -g module

卸载全局模块：npm uninstall -g module

查看全局路径：npm root -g

查看本地模块：npm list module

查看远程模块：npm info module

搜索远程模块：npm search module，只有官方源支持搜索，淘宝源不支持搜索；

查看缓存：npm config get cache

清除缓存：npm cache clean [--force]

运行命令：npm run command，package.json文件包含需要运行的命令；