Skip to content
Go back

前端开发指南

Edit page

前端开发指南

前端工具简介

ECMAScript

由国际组织 ECMA 定义的一套脚本语言规范, JavaScript 是该标准的实现,如今的标准版本为 ECMAScript 6 通常称为 ES6 。

NPM

NPM (Node Package Manager , Node 包管理器) 是 node.js 默认的包管理工具,以 JavaScript 编写。

项目根目录下的 package.js 文件就是该项目的依赖配置文件, npm 根据该配置文件自动下载安装依赖模块。 下面是一个 package.json 文件示例:

{
  // 项目名称,必填
  "name": "Hello World",
  // 项目版本,必填
  "version": "0.0.1",
  // 项目作者,选填
  "author": "张三",
  // 项目描述,选填
  "description": "第一个node.js程序",
  // 项目关键词,选填
  "keywords": ["node.js", "javascript"],
  // 项目仓库地址,选填
  "repository": {
    "type": "git",
    "url": "https://path/to/url"
  },
  // 项目使用的开源协议,选填
  "license": "MIT",
  // 项目的引擎版本
  "engines": { "node": "0.10.x" },
  // bug反馈地址,以及邮箱
  "bugs": { "url": "http://path/to/bug", "email": "bug@example.com" },
  "contributors": [{ "name": "李四", "email": "lisi@example.com" }],
  // 指定脚本命令的缩写,比如下面的代码表示命令行执行 npm run start 时,执行的是 node index.js 。
  "scripts": {
    "start": "node index.js"
  },
  // 指定项目运行需要的软件包
  "dependencies": {
    "express": "latest",
    "mongoose": "~3.8.3",
    "handlebars-runtime": "~1.0.12",
    "express3-handlebars": "~0.5.0",
    "MD5": "~1.2.0"
  },
  // 指定项目开发时需要的软件包
  "devDependencies": {
    "bower": "~1.2.8",
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-clean": "~0.5.0",
    "browserify": "2.36.1",
    "grunt-browserify": "~1.3.0"
  }
}

版本号限定符:

Webpack

Webpack 是 JavaScript 的静态代码打包器。

参考文档: https://www.webpackjs.com/concepts/

Vue-CLI

Vue 项目搭建脚手架,通过脚手架,我们可以在命令行快速完成项目的搭建,生成基础配置信息等。

Vue Router

Vue 内置的路由管理工具,与 Vue 深度融合。

官方文档:https://next.router.vuejs.org

Vuex

Vue 内置的状态管理库。用于解决页面中多个组件依赖与同一状态带来的问题

  1. 因为组件之间状态是相互隔离的,传统方式是传递 props 来完成组件间通信,当组件树越来越复杂了,这种方式将变得异常复杂;
  2. 多个组件的动作有可能影响同一片状态,而组件间各自维护自己的状态,造成了状态的冗余,降低代码可维护性。

Vuex 统一管理这些需要共享的状态就可以解决这些问题。

官方文档: https://next.vuex.vuejs.org

ESLint

JavaScript 代码检查工具。

官方文档:https://cn.eslint.org/docs/user-guide/getting-started

Sass

Sass(Syntactically Awesome StyleSheets)是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

官方文档:https://www.sass.hk/docs/

PostCSS

PostCSS 是一个使用 JavaScript 转换 CSS 的工具。可以规范 CSS 代码,支持变量和混淆等等。

官方文档:https://www.postcss.com.cn/

Babel

Babel 是一个 JavaScript 编译器,主要采用 ECMAScript 2015+ 的语法将代码转换为向后兼容的 JavaScript 语法,以便保证旧版浏览器的兼容性。

官方文档:https://www.babeljs.cn/docs/

Cypress

Cypress 是为现在网络模型搭建的下一代前端测试工具。提供了编写端到端测试、集成测试、单元测试的能力。

官方文档:https://docs.cypress.io/guides/overview/why-cypress

Travis CI

Travis CI 是一个自动化测试集成工具。

官方文档:https://docs.travis-ci.com/


Edit page
Share this post on:

Previous Post
撤销修改
Next Post
命名规范