大前端基础 4

发表于 更新于 分类于 本文字数： 1k 阅读时长 ≈ 4 分钟
本文主要介绍 Webpack 和 基于 Vue 的 Element-Admin。至此，大前端基础学习结束，对于前端开发来说，这些知识是必须要掌握的，后续的学习都是在这些基础上进行的。

Webpack

Webpack 是一个模块打包器，可以将多个模块打包成一个文件。

官网：https://webpack.js.org/

为什么需要模块打包器？

在前端开发中，我们会将一个页面拆分成多个模块，比如：头部、底部、侧边栏、内容区域等。这些模块都是独立的，但是在浏览器中，我们需要将这些模块组合起来，形成一个完整的页面。这就需要一个模块打包器，将这些模块打包成一个文件。

安装

1
npm install --save-dev webpack webpack-cli

或者全局安装：

1
npm install -g webpack webpack-cli

对于 webpack4, 我们更倾向于在项目中安装 webpack，而不是全局安装。

初始化项目

  1. 创建一个项目目录

1
2
mkdir webpack-demo
cd webpack-demo

  1. 初始化项目

1
npm init -y

  1. 创建一个 src 目录，用于存放源代码

1
mkdir src

  1. 创建一个 index.js 文件，和 util.js、 common.js 用于测试

1
2
3
4
5
6
7
// src/index.js
console.log('hello webpack');

import { add } from './util.js';
import { info } from './common.js';

info(add(1, 2));
1
2
3
4
// src/util.js
export function add(a, b) {
    return a + b;
}
1
2
3
4
// src/common.js
export.info = function (msg) {
    console.log(msg);
}

  1. 创建一个 dist 目录，用于存放打包后的文件，在这个目录下创建一个 index.html 文件

1
2
3
mkdir dist
cd dist
touch index.html

  1. 创建一个 webpack.config.js 文件，用于配置 webpack

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js
// 导入 path 模块，用于处理路径
const path = require('path');

// 导出一个配置对象
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

参考：webpack 配置

  1. 打包

1
npx webpack

打包后，会在 dist 目录下生成一个 bundle.js 文件，这个文件就是打包后的文件。

  1. 在 index.html 中引入打包后的文件

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack demo</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

打开 index.html，可以看到控制台输出了 hello webpack 和 3。

其他功能

webpack 还有其他功能，比如：压缩、合并、编译、热更新等，这些功能都可以通过配置来实现。

参考：webpack 功能

合并 CSS 文件

  1. 安装 css-loader 和 style-loader

1
npm install --save-dev css-loader style-loader

  1. 在 webpack.config.js 中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 配置模块加载器
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
}

  1. 在 src 目录下创建一个 index.css 文件

1
2
3
4
/* src/index.css */
body {
    background-color: #f00;
}

  1. 在 index.js 中引入 index.css

1
2
// src/index.js
import './index.css';

  1. 打包

1
npx webpack

打包后，打开 index.html，可以看到背景色变成了红色。

拓展

未来，我们学习各种框架后，可能使用不到 webpack，因为框架本身就有打包功能，比如：Vue、React、Angular 等。

但我们还是需要学习 webpack，因为 webpack 的思想是值得我们学习的。

Vue

Vue 是一个渐进式的 JavaScript 框架，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

官网：https://cn.vuejs.org/

注意⚠️：本次学习的目的并非真正学习 Vue，只是对 Vue 有一个初步的了解，以便后续学习。

Vue-Element-Admin

Vue-Element-Admin 是一个基于 Vue 和 Element UI 的后台管理系统模板。

官网：https://panjiachen.github.io/vue-element-admin-site/zh/

使用

  1. 克隆项目

1
git clone https://github.com/PanJiaChen/vue-element-admin.git

  1. 进入项目目录

1
cd vue-element-admin

  1. 安装依赖

1
npm install

  1. 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

1
npm install --registry=https://registry.npmmirror.com

  1. 本地开发 启动项目

1
npm run dev

大前端基础 结束

至此，大前端基础学习结束，对于前端开发来说，这些知识是必须要掌握的，后续的学习都是在这些基础上进行的。

撒花🎉

计划有关前端下一步学习 Vue -> Uni-app -> 小程序 -> TypeScript -> Electron
（这个计划可能会变，不过大概就是这些😉）

对于后端，我已经学习了 Java, 并计划学习 C++ -> Jo, 还有 Java 的一些框架，比如：Spring、Spring Boot、Spring Cloud 等。