前端模块化与工程化 | Vue-cli 与 Webpack 的使用
文章目录
- 一、安装 Node.js 环境
- 二、安装 Vue-cli
- 三、创建 Vue-cli 应用程序
- 四、安装 Webpack
- 五、创建一个 webpack 程序
- 六、小结
一、安装 Node.js 环境
Node.js 官网下载地址：http://nodejs.cn/download/
一般系统下载 windows 64 位的 msi
安装过程一直下一步即可，可以修改安装路径，中间有个 Add to Path 的选项记得勾选（即自动将 Node.js 添加到环境变量中）
安装完成后，cmd 进入到命令行中查看 Node.js 是否安装成功
输入如下命令：
node -v
安装完 Node.js 后，自带 npm，输入如下命令查看 npm 是否安装成功：
npm -v
npm 类似于后端的 Maven，用来管理前端所需的依赖，我们经常能够看到 npm install 命令，类似于 Maven 的 mvn install
为提高 Node.js 镜像的下载速度，我们可以安装 Node.js 淘宝镜像加速器
命令行中执行如下命令：
npm install cnpm -g
安装成功后可进入到如下目录查看：
C:\Users\用户\计算机用户名\AppData\Roaming\npm
可以看到其中下载了 cnpm
二、安装 Vue-cli
有了 Node.js 以及 npm 之后，我们就进入到命令行中安装 vue-cli
vue-cli 是一个 vue 项目的脚手架，可以快速构建一个前端项目
输入如下命令：
cnpm install vue-cli -g
安装成功后，进入到如下路径（即生成的 vue-cli 目录）查看：
C:\Users\用户\用户名\AppData\Roaming\npm\node_modules\vue-cli
从上方可以看到 vue-cli 的所包含的文件，一个前端模块化与工程化的基本项目结构如上图所示
也可以在命令中，输入如下命令查看：
vue list
蓝色字体的东西可以类比于 IDEA 中创建 Maven 项目的各种模板，我们后面需要使用到 Webpack 进行前端项目的打包
三、创建 Vue-cli 应用程序
创建一个空的项目文件夹，并进入到该文件下，在资源地址栏中敲 cmd 进入到命令行
通过如下命令初始化 Vue-cli 项目
vue init webpack 项目名
Project name 、Project description 直接按回车即可， Author 可自行修改然后按回车确认
一路选择 No，以便手动创建
最下方选择【No, I will handle that myself】
项目创建完毕
进入到项目目录下，可以看到生成了很多文件
在资源管理器的地址栏中，敲 cmd
输入如下命令安装 npm：
npm install
结果如下：
可看到多了一个 node_modules
根据前面的警告提示信息，要输入如下命令修复错误：
npm audit fix
最后，就是运行项目，输入如下命令：
npm run dev
其作用相当于 IDEA 中部署 Tomcat 运行 Web 项目
在浏览器地址栏输入：localhost:8080
即可看到初始化完毕的 Vue 项目
Ctrl + C 可以停止运行，类似于关闭 Tomcat，停止后则无法访问项目
四、安装 Webpack
为什么需要 Webpack？
由于 Vue 是按照 ES6 规范，而当前浏览器主要支持 ES5 规范，所以需要通过 Webpack 将 Vue 项目打包降级，实现所有浏览器中都能正常运行 Vue 项目。
输入如下命令安装 webpack：
npm install webpack -g
接下来，输入如下命令安装 webpack-cli：
npm install webpack-cli -g
然后，输入如下命令查看 webpack 版本信息
webpack -v
至此，webpack 安装完毕。
五、创建一个 webpack 程序
1、新建一个空的文件夹，在其中创建 modules 目录，然后在该目录下创建 hello.js 与 main.js
按照 ES6 规范，hello.js 负责暴露 function，main.js 为主入口，负责引入 hello.js，并在其中调用 hello.js 中暴露的 function
可将该 hello.js 类比与 java 中的 class，function 为该类下的方法
可将 main.js 类比为 java 中的主类，通过主函数运行程序，new 出一个类对象并调用其中的方法
代码分别如下：
hello.js
// 通过 exports 暴露方法
exports.fun1 = function() {
document.write('hello.js中的fun1被执行！
');
}
exports.fun2 = function() {
document.write('hello.js中的fun2被执行！
');
}
exports.fun3 = function() {
document.write('hello.js中的fun3被执行！
');
}
main.js
var hello = require('./hello');
hello.fun1();
2、创建一个 webpack.config.js，用于配置项目打包信息
entry 表示需打包程序的入口（即 main.js 的路径），output 中的 filename 定义打包后生成的 js 文件所在路径以及文件名
module.exports = {
entry: './modules/main.js',
output: {
filename: './js/bundle.js'
}
};
3、在创建的项目目录下，进入到命令行
输入 webpack 命令打包：
打包成功后，可以看到生成了 bundle.js
bundle.js 如下：
可以看到，我们所有的 js 代码都被打包到一起
4、新建一个 index.html，在其中引入生成的 bundle.js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端模块化开发title>
<script src="./dist/js/bundle.js">script>
head>
<body>
body>
html>
然后在浏览器中查看该 html，可以看到其中的 js 内容被执行：
六、小结
基于 Webpack，我们可以正式进行 Vue 项目的开发，其中的 html 十分简洁，因为大部分 js 代码被打包成各个模块后，可以直接被引用，从而实现了前端的模块化开发。