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 0000000000000000000000000000000000000000..46de0e8707cbb9a763038496ee772db530c53d54 --- /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 0000000000000000000000000000000000000000..a9972ac525f28e39e064a6e21a650f461f449b4a --- /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 + + +
+ +
`
+
+**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 0000000000000000000000000000000000000000..e3db683202dcd8b74dc492f901378994f128efb7
--- /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则是直接用在
+