1、webpack的作用

模块打包工具，可以将项目打包成兼容浏览器的格式，或者打包成手机app等。
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

2、node的作用

node是一个在浏览器外执行JavaScript语言的环境，就好比JRE是Java的运行环境一样。

3、前端项目的组成

前端项目包含些什么？
当然常见得无非就是各种静态资源文件。
例如：
脚本(js)文件；
样式(css)文件
图片(png\jpg…)文件
其他媒体(MP3、MP4…)文件等等

4、创建vue项目的3中方式

（1）npm init
不常用，这个命令是创建node包项目的命令，因为vue项目实际可以看成一个node的包，所以，也可以用创建node包项目的方法去创建vue项目。

（2）vue init webpack 项目名
是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目。
webpack是官方推荐的标准模板名。
假如想要使用其他的模板，就可以更改webpack为其他的模板的名称。
例如使用github上面electron-vue的模板。Electron-Vue是个可以让我们使用 Vue 来开发 Electron 桌面程序的框架，单页面的应用解决了在Electron中每次打开新页面都要创建窗口的烦恼。
使用方式：vue init electron-vue 项目名称

顺便介绍electron项目：
Electron是由Github开发，目的是使用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 为了达成这个目的，Electron通过将Chromium和Node.js合并到同一个运行时环境中，然后将其打包为Mac，Windows和Linux系统下的应用；
通俗的来讲Electron给前端项目套上了一个壳，这个壳是可以让你使用纯 JavaScript 调用丰富的原生 APIs（操作系统API） 来创造桌面应用。

（3）vue create 项目名 //是vue-cli3.x的初始化方式，模板是固定的，但是，模板的选项可自由配置

5、vue-cli的作用

Vue-cli是什么？
上文提到打包工具，我们选择了在界面具有老大地位的Webpack，
随着使用Webpack的人越来越多， 针对Webpack的各种插件如百家争鸣般越来越多，
如果我们自己准备从0开始配置Webpack,那往往要琢磨好久好久...
有同学可能会想啦...
有没有一个工具能帮我们既合理又迅速的整合最佳配置呢？
让我们不需要将大部分时间浪费在配置环节呢？
对，你猜的没错，这就是Vue-cli（脚手架）
先看下官网介绍，如下图：

通过上图的文字说明可以知道：
有了它我们就不用关心Webpack如何有效配置；
有了它我们只需要专注于业务代码；
开箱即用多方便。

6、vue、node、elementUI、express之间的关系

了解这三个的关系很简单，假设你现在需要做一个学生管理系统，那么你可以用html+css+js直接写个页面，但是这样子做的话开发速度太慢，修改下页面需要各种jQuery的调用。

这个时候你就会想要个能够让你快速进行开发的框架，这时你可以挑选anguar，react或者vue，很荣幸的是，你选中了vue。

接着你觉得写vue的时候很多组件都需要自己亲自去编写，毕竟自己是新手，重用性也不高。

比如一个控制图片滑动的swiper，自己就花了不少时间去实现各种功能，比如自动播放呀，轮播呀之类的。

然后你到网上一查，发现有个叫做element的vue组件库，已经实现了自己想要的大部分组件。

这时，你就会直接npm install该库，然后愉快的开始写代码了。但是这里你实现的只是网页端即前端。

既然是学生管理，那学生增删改的这些逻辑已经数据库的操作，你是不是应该在后端实现呢？

后端可以通过很多框架来实现，java的ssh，或者python的django，又或者nodejs之类的。很不幸，这次你又选中的nodejs+express！

7、npm命令