前端模块化与工程化 | Vue-cli 与 Webpack 的使用

最新推荐文章于 2024-06-10 15:05:54 发布

只是曾路过

最新推荐文章于 2024-06-10 15:05:54 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： vue.js webpack node.js npm es6

本文链接：https://blog.youkuaiyun.com/qq_45716120/article/details/112848675

版权

前端专栏收录该内容

7 篇文章

订阅专栏

文章目录

一、安装 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('<h1>hello.js中的fun1被执行！</h1>');
}
exports.fun2 = function() {
    document.write('<h1>hello.js中的fun2被执行！</h1>');
}
exports.fun3 = function() {
    document.write('<h1>hello.js中的fun3被执行！</h1>');
}

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

<!DOCTYPE html>
<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>