From eec578f5c054fc057c8244a22918396ab418a16e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=84?= <1290344919@qq.com>
Date: Tue, 29 Jun 2021 11:47:50 +0800
Subject: [PATCH] 6.29
---
.../01_node.js.md" | 94 +
.../02_webpack.md" | 200 ++
.../03_webpack_css.md" | 115 +
.../04_webpack_image.md" | 119 +
.../05_vue-cli.md" | 195 ++
...43\347\240\201\345\274\200\345\217\221.md" | 358 +++
...0_\347\273\203\344\271\240\351\242\230.md" | 6 +
...32\345\256\242\347\273\203\344\271\240.md" | 104 +
.../\347\273\203\344\271\240\351\242\230.txt" | 1 +
.../bootstrap/css/bootstrap-grid.min.css" | 7 +
.../bootstrap/css/bootstrap-reboot.min.css" | 8 +
.../bootstrap/css/bootstrap.min.css" | 7 +
.../bootstrap/js/bootstrap.bundle.min.js" | 7 +
.../bootstrap/js/bootstrap.min.js" | 7 +
.../calmlog-details.html" | 231 ++
.../calmlog-index.html" | 28 +
.../calmlog-list.html" | 233 ++
.../css/cl-css.css" | 451 +++
.../font-awesome/css/font-awesome.min.css" | 4 +
.../font-awesome/fonts/FontAwesome.otf" | Bin 0 -> 134808 bytes
.../fonts/fontawesome-webfont.eot" | Bin 0 -> 165742 bytes
.../fonts/fontawesome-webfont.svg" | 2671 +++++++++++++++++
.../fonts/fontawesome-webfont.ttf" | Bin 0 -> 165548 bytes
.../fonts/fontawesome-webfont.woff" | Bin 0 -> 98024 bytes
.../fonts/fontawesome-webfont.woff2" | Bin 0 -> 77160 bytes
.../highlight/highlight.pack.js" | 2 +
.../highlight/styles/railscasts.css" | 106 +
.../img/default-img.jpg" | Bin 0 -> 3852 bytes
.../img/logo.jpg" | Bin 0 -> 5903 bytes
.../img/portrait.png" | Bin 0 -> 12233 bytes
.../jquery/jquery.min.js" | 5 +
.../js/main.js" | 242 ++
.../temporary-img/artical-img1.jpg" | Bin 0 -> 572306 bytes
.../temporary-img/artical-img2.jpg" | Bin 0 -> 3097845 bytes
.../temporary-img/code.jpg" | Bin 0 -> 43034 bytes
.../temporary-img/list-image1.jpg" | Bin 0 -> 32481 bytes
.../temporary-img/list-image2.jpg" | Bin 0 -> 27041 bytes
.../temporary-img/list-image3.jpg" | Bin 0 -> 21441 bytes
.../temporary-img/list-right.jpg" | Bin 0 -> 30796 bytes
.../temporary-img/recommended-left.jpg" | Bin 0 -> 57923 bytes
.../temporary-img/recommended-right.jpg" | Bin 0 -> 46773 bytes
.../temporary-img/recommended.jpg" | Bin 0 -> 170949 bytes
42 files changed, 5201 insertions(+)
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/01_node.js.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/02_webpack.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/03_webpack_css.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/04_webpack_image.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/05_vue-cli.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/06_vue-cli\344\273\243\347\240\201\345\274\200\345\217\221.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/80_\347\273\203\344\271\240\351\242\230.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/90_\345\215\232\345\256\242\347\273\203\344\271\240.md"
create mode 100644 "\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/\347\273\203\344\271\240\351\242\230.txt"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/bootstrap/css/bootstrap-grid.min.css"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/bootstrap/css/bootstrap-reboot.min.css"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/bootstrap/css/bootstrap.min.css"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/bootstrap/js/bootstrap.bundle.min.js"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/bootstrap/js/bootstrap.min.js"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-details.html"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-index.html"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-list.html"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/css/cl-css.css"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/font-awesome/css/font-awesome.min.css"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/font-awesome/fonts/FontAwesome.otf"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/font-awesome/fonts/fontawesome-webfont.eot"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/font-awesome/fonts/fontawesome-webfont.svg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/font-awesome/fonts/fontawesome-webfont.ttf"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/font-awesome/fonts/fontawesome-webfont.woff"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/font-awesome/fonts/fontawesome-webfont.woff2"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/highlight/highlight.pack.js"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/highlight/styles/railscasts.css"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/img/default-img.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/img/logo.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/img/portrait.png"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/jquery/jquery.min.js"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/js/main.js"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/artical-img1.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/artical-img2.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/code.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/list-image1.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/list-image2.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/list-image3.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/list-right.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/recommended-left.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/recommended-right.jpg"
create mode 100644 "\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/temporary-img/recommended.jpg"
diff --git "a/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/01_node.js.md" "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/01_node.js.md"
new file mode 100644
index 00000000..46de0e87
--- /dev/null
+++ "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/01_node.js.md"
@@ -0,0 +1,94 @@
+## 本节目标
+
+
+## node.js介绍
+
+Node.js 就是运行在服务端的 JavaScript。
+
+Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
+
+Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
+
+因为node.js使用javascript语法，所以特别适合web前端使用，可以用来做一些简单的服务端功能。
+
+## node.js安装
+
+官网地址：
+
+ http://nodejs.cn/
+
+下载下来，直接下一步下一步安装就可以了。
+
+安装好后，打开cmd命令行，查看 node -v 版本：
+
+```
+$ node -v
+v14.15.4
+```
+
+## Hello world
+
+新建 hello.js 文件，内容如下：
+
+```js
+console.log("Hello world");
+```
+
+使用node命令行运行：
+
+```
+$ node hello.js
+Hello world
+```
+
+## NPM
+
+NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
+
+ 1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
+ 2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
+ 3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
+
+由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。
+同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
+
+```
+$ npm -v
+6.14.10
+```
+
+npm升级：
+
+```
+$ npm install npm -g
+```
+
+设置淘宝镜像：
+
+```
+// npm配置淘宝镜像
+$ npm config set registry https://registry.npm.taobao.org
+
+// 查看npm镜像是否配置成功
+$ npm config get registry
+```
+
+**示例1**，对123456进行md5加密：
+
+1）安装md5模块：
+
+```
+$ npm install md5
+```
+
+2）编写代码：
+
+```js
+let md5 = require("md5");
+console.log(md5("123456"));
+```
+
+## 本节总结
+
+1. node.js是一门后端语言，适合web前端开发做一些简单的后端功能。
+2. npm是包管理工具，跟随node.js一起安装。
\ No newline at end of file
diff --git "a/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/02_webpack.md" "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/02_webpack.md"
new file mode 100644
index 00000000..a9972ac5
--- /dev/null
+++ "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/02_webpack.md"
@@ -0,0 +1,200 @@
+## 本节目标
+
+1. 熟悉webpack的使用
+
+## webpack介绍
+
+Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
+
+简单的说就是：**打包工具**。
+
+官网地址：
+
+ https://webpack.docschina.org/
+
+## webpack安装
+
+直接用npm安装就可以了：
+
+```
+$ npm install webpack -g
+$ npm install webpack-cli -g
+```
+
+安装完成查看版本号：
+
+```
+$ webpack -v
+webpack 5.38.1
+webpack-cli 4.7.2
+```
+
+## webpack使用
+
+步骤较多，具体分为5步：
+
+ 1. 创建项目App。
+ 2. npm初始化包管理模块。
+ 3. 新建 index.html和index.js文件。
+ 4. 创建一个 bundle。
+ 5. 打包main.js文件。
+
+**1） 创建项目App。**
+
+新建 app 目录即可。
+
+**2）npm初始化包管理模块。**
+
+```
+$ npm init -y
+```
+
+初始化package.json，该文件表示对该应用的说明。
+
+**3）新建 index.html和index.js文件。**
+
+```
+ app
+ |- package.json
++ |- index.html
++ |- /src
++ |- index.js
+```
+
+src/index.js：
+
+```js
+function component() {
+ const element = document.createElement('div');
+ // lodash（目前通过一个 script 引入）对于执行这一行是必需的
+ element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ return element;
+}
+document.body.appendChild(component());
+```
+
+index.html：
+
+```html
+
+
+
+
+ 起步
+
+
+
+
+
+
+```
+
+其中：
+
+ Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
+
+运行这个示例， 会在页面输出：Hello webpack。
+
+在此示例中，script 标签之间存在隐式依赖关系。
+在 index.js 文件执行之前，还需要在页面中先引入 lodash。
+这是因为 index.js 并未显式声明它需要 lodash，假定推测已经存在一个全局变量 _。
+
+使用这种方式去管理 JavaScript 项目会有一些问题：
+
+ 1. 无法直接体现，脚本的执行依赖于外部库。
+ 2. 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
+ 3. 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。
+
+让我们使用 webpack 来管理这些脚本。
+
+**4）创建一个 bundle。**
+
+首先，我们稍微调整下目录结构，创建分发代码(./dist)文件夹用于存放分发代码，源代码(./src)文件夹仍存放源代码。
+源代码是指用于书写和编辑的代码。
+分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载。调整后目录结构如下：
+
+```
+ webpack-demo
+ |- package.json
++ |- /dist
++ |- index.html
+- |- index.html
+ |- /src
+ |- index.js
+```
+
+要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：
+
+```
+$ npm install lodash --save
+```
+
+现在，在我们的 script 中 import lodash：
+
+src/index.js
+
+```js
+import _ from 'lodash';
+function component() {
+ const element = document.createElement('div');
+
+// lodash 在当前 script 中使用 import 引入
+ element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ return element;
+}
+document.body.appendChild(component());
+```
+
+其中：
+
+ import _ from 'lodash'; 表示导入lodash这个包，并且命名为 _。
+
+现在，我们将会打包所有脚本，我们必须更新 index.html 文件。
+由于现在是通过 import 引入 lodash，所以要将 lodash script 删除，
+然后修改另一个 script 标签来加载 bundle，而不是原始的 ./src 文件：
+
+dist/index.html
+
+```html
+
+
+
+
+ 起步
+
+
+
+
+
+```
+
+其中：
+
+ main.js 是后面用打包工具生成出来的。
+
+**5）打包main.js文件。**
+
+新建配置webpack.config.js，这个webpack打包的时候加载的配置文件：
+
+```js
+const path = require("path");
+
+module.exports = {
+ entry: './src/index.js', // 从src/index.js为入口进行打包
+ output: { // 输出配置
+ path: path.resolve(__dirname, 'dist'), // 输出目录
+ filename: 'main.js' // 输出的js文件
+ },
+ mode: 'development' // 设置mode，生产环境：production
+}
+```
+
+打包：
+
+```
+$ webpack
+```
+
+## 本节总结
+
+1. webpack方便工程化开发。
\ No newline at end of file
diff --git "a/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/03_webpack_css.md" "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/03_webpack_css.md"
new file mode 100644
index 00000000..c61b93f3
--- /dev/null
+++ "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/03_webpack_css.md"
@@ -0,0 +1,115 @@
+## 本节目标
+
+1. 熟悉webpack中如何打包css。
+
+## 加载css
+
+分为5步：
+
+ 1. 安装依赖库。
+ 2. 修改webpack.config.js。
+ 3. 增加style.css文件。
+ 4. index.js元素增加class属性。
+ 5. 打包项目。
+
+**1）安装依赖库。**
+
+为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，
+并在 module 配置 中添加这些 loader：
+
+```
+$ npm install style-loader css-loader --save-dev
+```
+
+**2）修改webpack.config.js。**
+
+```js
+const path = require("path");
+
+module.exports = {
+ entry: './src/index.js', // 从src/index.js为入口进行打包
+ output: { // 输出配置
+ path: path.resolve(__dirname, 'dist'), // 输出目录
+ filename: 'main.js' // 输出的js文件
+ },
+ module: { // 模块配置
+ rules: [ // 规则
+ {
+ test: /\.css$/i, // 查找所有css后缀的文件。
+ use: ['style-loader', 'css-loader'], // 使用依赖库载入，style-loader在前，css-loader在后。
+ }
+ ]
+ },
+ mode: 'development', // 设置mode，生产环境：production
+}
+```
+
+模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。
+链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。
+最后，webpack 期望链中的最后的 loader 返回 JavaScript。
+
+webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。
+在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。
+
+这使你可以在依赖于此样式的 js 文件中 import './style.css'。
+现在，在此模块执行过程中，含有 CSS 字符串的 style 标签，将被插入到 html 文件的 head 中。
+
+**3）增加style.css文件。**
+
+我们尝试一下，通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js 中：
+
+```
+ app
+ |- package.json
+ |- webpack.config.js
+ |- /dist
+ |- bundle.js
+ |- index.html
+ |- /src
+ |- style.css // 增加这个你文件
+ |- index.js
+ |- /node_modules
+```
+
+src/style.css
+
+```css
+.hello {
+ color: red;
+}
+```
+
+**4）index.js元素增加class属性。**
+
+src/index.js
+
+```js
+import _ from 'lodash';
+import './style.css'; // 载入style.css文件
+
+function component() {
+ const element = document.createElement('div');
+ // lodash 在当前 script 中使用 import 引入
+ element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ element.classList.add("hello"); // 给元素增加class属性。
+ return element;
+}
+document.body.appendChild(component());
+
+```
+
+**5）打包项目。**
+
+现在运行 build 命令：
+
+```
+$ webpack
+```
+
+再次在浏览器中打开 dist/index.html，你应该看到 Hello webpack 现在的样式是红色。
+要查看 webpack 做了什么，请检查页面，查看**页面标签和头部**。
+
+
+## 本节总结
+
+1. webpack也可以支持打包css文件。
\ No newline at end of file
diff --git "a/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/04_webpack_image.md" "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/04_webpack_image.md"
new file mode 100644
index 00000000..9997c340
--- /dev/null
+++ "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/04_webpack_image.md"
@@ -0,0 +1,119 @@
+## 本节目标
+
+1. 熟悉webpack中如何打包css。
+
+## 加载图片
+
+假如，现在我们正在下载 CSS，但是像 background 和 icon 这样的图像，要如何处理呢？
+在 webpack 中，可以使用内置的 Asset Modules，我们可以轻松地将这些内容混入我们的系统中：
+
+分为5步：
+
+ 1. 修改webpack.config.js。
+ 2. 添加一个图像。
+ 3. 修改index.js，载入图像。
+ 4. 修改style.css, 设置背景。
+ 5. 打包项目。
+
+**1）修改webpack.config.js。**
+
+```js
+const path = require("path");
+
+module.exports = {
+ entry: './src/index.js', // 从src/index.js为入口进行打包
+ output: { // 输出配置
+ path: path.resolve(__dirname, 'dist'), // 输出目录
+ filename: 'main.js' // 输出的js文件
+ },
+ module: {
+ rules: [{
+ test: /\.css$/i, // 查找所有css后缀的文件。
+ use: ['style-loader', 'css-loader'], // style-loader在前
+ },
+ {
+ test: /\.(png|svg|jpg|jpeg|gif)$/i, // 查找图片后缀的文件。
+ type: 'asset/resource',
+ },
+ ]
+ },
+ mode: 'development', // 设置mode，生产环境：production
+}
+```
+
+现在，在 import MyImage from './my-image.png' 时，此图像将被处理并添加到 output 目录，
+并且 MyImage 变量将包含该图像在处理后的最终 url。
+
+在使用 css-loader 时，如前所示，会使用类似过程处理你的 CSS 中的 url('./my-image.png')。
+loader 会识别这是一个本地文件，并将 './my-image.png' 路径，替换为 output 目录中图像的最终路径。
+
+而 html-loader 以相同的方式处理 `
`
+
+**2）添加一个图像。**
+
+我们向项目添加一个图像，然后看它是如何工作的：
+
+```
+ webpack-demo
+ |- package.json
+ |- webpack.config.js
+ |- /dist
+ |- bundle.js
+ |- index.html
+ |- /src
+ |- girl.jpg
+ |- style.css
+ |- index.js
+ |- /node_modules
+```
+
+**3）修改index.js，载入图像。**
+
+src/index.js
+
+```js
+import _ from 'lodash';
+import './style.css';
+import Girl from './girl.jpg';
+
+function component() {
+ const element = document.createElement('div');
+ // lodash 在当前 script 中使用 import 引入
+ element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ // 增加class属性
+ element.classList.add("hello");
+ // 加载图片
+ const image = new Image();
+ image.src = Girl;
+ console.log(image);
+ element.appendChild(image);
+
+ return element;
+}
+document.body.appendChild(component());
+```
+
+**4）修改style.css, 设置背景。**
+
+```css
+.hello {
+ color: red;
+ background: url('./girl.jpg');
+}
+```
+
+**5）打包项目。**
+
+重新构建并再次打开 index.html 文件：
+
+```
+$ webpack
+```
+
+如果一切顺利，你现在应该看到你的 icon 图标成为了重复的背景图，以及 Hello webpack 文本旁边的 img 元素。
+如果检查此元素，你将看到实际的文件名已更改为 29822eaa871e8eadeaa4.png。
+这意味着 webpack 在 src 文件夹中找到我们的文件，并对其进行了处理！。
+
+## 本节总结
+
+1. webpack也可以支持打包图片文件。
\ No newline at end of file
diff --git "a/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/05_vue-cli.md" "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/05_vue-cli.md"
new file mode 100644
index 00000000..e3db6832
--- /dev/null
+++ "b/\345\272\204\346\230\255\345\261\261/A\350\257\276\344\273\266/2019\347\272\247\350\256\241\345\272\224\347\217\255_web\345\211\215\347\253\257\351\253\230\347\272\247_20210629/05_node.js\345\222\214webpack/05_vue-cli.md"
@@ -0,0 +1,195 @@
+## 本节目标
+
+1. 了解vue-cli是什么。
+
+## 前言
+
+前面我们学习了webpack，当然我们也可以用webpack工具进行vue应用的的开发。
+
+新建webpack vue项目：
+
+**1） 创建项目App。**
+
+新建 app 目录即可。例如：app-vue。
+
+**2）npm初始化包管理模块。**
+
+```
+$ npm init -y
+```
+
+初始化package.json，该文件表示对该应用的说明。
+
+**3）安装vue等依赖包。**
+
+```
+$ npm install webpack --save-dev
+$ npm install webpack-cli --save-dev
+$ npm install vue --save
+```
+
+**4）新建 dist/index.html 和 src/index.js 文件。**
+
+src/index.js：
+
+```js
+import Vue from 'vue/dist/vue.esm.js'; // 这边需要引入esm模块的vue
+
+let app = new Vue({
+ el: "#app",
+ data: {
+ message: "hello world"
+ }
+});
+```
+
+其中：
+
+ esm表示：EcmaScript Module（ES MODULE)，支持import from 最新标准的。
+
+vue几个文件：
+
+ 1. vue.js ： vue.js则是直接用在
+
+