服务器对大前端扫盲 Vue.js + Element-UI

npm：node.js的包管理工具，用于同一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。

ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。

Babel：一款将ES6代码转化为浏览器兼容的ES5代码的插件

vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。

vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。

vuex：Vue提供的状态管理工具，用于同一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。

webpack：一款强大的文件打包工具，可以将我们的前端项目文件同一打包压缩至js中，并且可以通过vue-loader等加载器实现语法转化与加载。

二：node.js

1. 简介

我们知道javascript代码只能在浏览器上运行，只有浏览器能够解析js代码，如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment)，这就是node.js。

node.js是对Chrome V8引擎进行了封装，是一个能让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

2. 运行一个helloworld.js

# 查看node的版本 

$ node -v 

$ cat helloworld.js 

console.log("Hello Node.js"); 

$ node helloworld.js 

Hello Node.js 

3. 运行一个简单的http服务

3.1 index.js

// 1、加载http模块 

var http = require('http'); 

// 2、创建一个http服务对象 

var server = http.createServer(); 

// 3、监听用户的请求事件（request事件） 

// 回调函数中有两个参数 

// request 对象 包含用户请求报文中所有内容，通过request对象可以获取所有用户提交过来的数据 

// response 对象 用来向用户响应一些数据，当服务器要向客户端响应数据的时候必须使用response对象 

server.on('request', function (req, res) { 

 res.setHeader('Content-Type', 'text/html; charset=utf-8'); 

 var url = req.url; 

 res.write('<h1> web http server <br/> request url :' + url + ' </h1>'); 

 // 对于每一个请求，服务器必须结束响应，否则，客户端（浏览器）会一直等待服务器响应结束 

 res.end(); 

}); 

// 4、启动服务 

server.listen(8080, function () { 

 console.log('服务器启动了，请访问：:8080'); 

}); 

3.2 运行index.js

$ node index.js 

3.3 在浏览器上访问:8080

三：npm

1. 简介

在传统的前端开发中我们会经常引入jquery、bootstrap、echarts等js插件，我们首先去插件的每个官网去下载下来，然后放到自己前端工程中static/js目录下，我们每引用一个插件都要去官网下载，然后将下载的插件拖到工程中来，美国的一个程序员Isaac Z. Schlueter就做够了这种机械运动，想简化这个流程，于是做了这样一件事：

买了台服务器作为代码仓库(registry), 用于存放被共享的代码

发邮件分别通知各大JS插件作者(如jQuery的作者、bootstrap的作者、Vue的作者、element-ui的作者等等)让他们使用npm publish 命令将自己的JS插件提交到registry中

用户如果想使用某个JS插件可以先在package.json中配置一些需要安装的插件名称和对应的版本号(依赖dependency)，然后通过npm install命令来下载它们，下载下来的插件自动放在node_modules目录下面

这套思想和maven是完全一样的，熟悉maven或者gradle的也就自然理解npm了，只不过npm用于js,maven用于java，都是作者先将共享的代码放到某个公共的代码仓库，用户先在配置文件中配置好要使用的依赖，然后通过一个命令就能下载下来。

（编辑：ASP站长网）