使用webpack+vue.js构建前端工程化

使用webpack+vue.js构建前端工程化

本篇主要介绍三块知识点：

• node.js

• vue.js

• webpack前端工程化

本篇不是写给零基础的同学看的，读者应具备一些服务器开发、前端开发基础

本篇目标

使用webpack+vue.js构建前端工程化本篇目标node.js基本入门node.js介绍环境搭建npm介绍npm淘宝镜像使用cnpm安装包node.js模块化程序结构node.js重要模块(API)介绍node.js全局对象node.js原生模块实现一个用户管理模块vue.js基本入门介绍基本编程模型（模板 + 模型）使用Vue指令定义模板使用Vue定义数据模型常用指令介绍组件化开发组件结构实现一个购物车程序使用webpack构建前端工程化webpack介绍总体结构图安装webpack使用webpack重构购物车程序

node.js基本入门

node.js介绍

node.js可以让javascript程序在后端运行起来。我们之前所熟知的javascript都是运行在前端浏览器，我们编写好了javascript代码后，由浏览器解释执行。而node.js，可以让我们编写javascript，然后在后端运行起来。现在的javascript和java、python一样，可以操作I/O、操作数据库、或者其他各类操作系统资源。

上面这张图，和下面的这张图很像。可以认为，node.js是javascript的一种跨平台运行在主机的实现。

环境搭建

• 下载node.js （运行环境）

  https://nodejs.org/en/

• 下载Visual Studio Code（开发环境）

  https://code.visualstudio.com/

npm介绍

写过Java的同学应该都知道，我们要编写程序往往都需要导入很多其他额外的JAR包（官方的JavaSE包默认提供了）。早期在Maven出现之前，我们都是需要手动去下载各种框架的JAR包。自从有了Maven之后，我们不再需要手动下载了，直接在一个POM.XML文件中引入需要的依赖即可。

在node中，运行一个node程序也会依赖于其他的一些模块。当然node也会自带一些基本模块。那当我们需要使用这些模块的时候，我们需要从网络上下载。这个去网上下载非常麻烦。node官方提供了一个管理工具npm，这个工具可以根据需要自动从服务器下载各种包。这就省去了，我们自己去网上下载包的过程。

npm淘宝镜像

官方的npm在国内速度是比较慢的，可以使用淘宝的镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，就可以使用cnpm从淘宝镜像来下载、安装node包

使用cnpm安装包

cnpm install <包的名称>

包的名称可以去https://npm.taobao.org/上搜索

node.js模块化程序结构

每一个js文件就是一个模块（json等其实也可以作为一个模块），对应的就是一个module对象。下面这一段程序，表示从外部引入一个模块，然后执行模块中的函数。

var fs = require("fs");     // 引入fs模块
​
var data = fs.readFileSync('input.txt');    // 调用fs模块中的readFileSync方法
​
console.log(data.toString());

第一行的, required表示引入一个包，返回的就是module对象。这个fs包，是node自带的包，引入一个包后就可以调用这个包下的方法。但是包中的方法不是都可以被调用的，只有类似：

exports.world = function() {
  
    console.log('Hello World');
}

这样的代码，才能被调用。更简单来说，在包中定义的函数都是对外不可见的，要想被外部调用，需要使用exports来定义函数。

这个require函数有点类似于C语言中的#include。它首先会从文件cache缓存中查找传入的模块名，如果没有找到再查找原生模块，最后查找文件中加载。

node.js重要模块(API)介绍

node.js全局对象

变量名	注释
__filename	表示当前正在执行的脚本的文件名
__dirname	表示当前执行脚本所在的目录。
console.log	输出日志

node.js原生模块

模块名称	介绍
os模块	获取操作系统相关的信息，例如：获取临时文件夹，获取主机名、获取操作系统名称
http模块	提供了开发服务器后端程序的相关API
path模块	提供了处理文件路径相关的API
net模块	提供了网络编程API

实现一个用户管理模块