webpack准备工作

yarn包管理器(必须)

快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快

中文官网地址: https://yarn.bootcss.com/

下载yarn

下载地址: https://yarn.bootcss.com/docs/install/#windows-stable

• windows - 软件包(在笔记文件夹里)

• mac - 通过homebrew安装(看上面地址里)

• mac如果没安装过homeBrew先运行这个命令

/usr/bin/ruby -e"$(curl -fsSL http://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

• 上面命令不行: 试试这个: curl -o- -L https://yarnpkg.com/install.sh | bash (直接安装yarn)

==不要安到带中文的路径下, 建议在C盘/==

使用yarn

与npm类似, 可以试试, 新建一个空白文件夹, 执行以下命令尝试一下

# 1. 初始化, 得到package.json文件(终端路径所在文件夹下)

yarn init

​

# 2. 添加依赖(下包)

# 命令: yarn add [package]

# 命令: yarn add [package]@[version]

yarn add jquery

yarn add jquery@3.5.1

​

# 3. 移除包

# 命令: yarn remove [package]

yarn remove jquery

# 4. 安装项目全部依赖(一般拿到别人的项目时, 缺少node_modules)

yarn

# 会根据当前项目package.json记录的包名和版本, 全部下载到当前工程中

​

# 5. 全局

# 安装: yarn global add [package]

# 卸载: yarn global remove [package]

# 注意: global一定在add左边

yarn global add @vue/cli

# 如何使用, 为明天学习vue做铺垫

yarn可能遇到的问题

如果报错参考报错文档: http://itcz_jiaoyu.gitee.io/error/#811

---

什么是模块, 模块化开发规范(CommonJS / ES6)commonJS规范:

// nodejs - commonJS规范-规定了导出和导入方式

// 导出 module.exports = {}

// 导入 const 变量 = require("模块标识")

ES6规范

// 导出 export 或者 export default {}

// 导入 import 变量名 from '模块标识'

字体图标的使用

1. 可以去阿里巴巴矢量图标库, 选中想要的图标, 登录后, 生成css文件和字体文件

2. 下载css文件和字体文件, 也可以使用在线地址

3. 在自己页面中引入iconfont.css, 并在想显示字体图标的标签上使用类名即可

箭头函数非常熟练

constfn= () => {}

fn()

​

constfn2= (a, b) => {returna+b}

fn(10, 20); // 结果是30

​

// 当形参只有一个()可以省略

constfn3=a=> {returna*2}

fn(50); // 结果是100

​

// 当{}省略return也省略, 默认返回箭头后表达式结果

constfn4=a=>a*2;

fn(50); // 结果是100

什么是服务器, 本地启动node服务, 服务器和浏览器关系, 服务器作用

服务器是一台性能高, 24小时可以开机的电脑

​

服务器可以提供服务(例如: 文件存储, 网页浏览, 资源返回)

​

在window电脑里安装node后, 可以编写代码用node 启动一个web服务, 来读取本地html文件, 返回给浏览器查看

​

浏览器 -> 请求资源 -> 服务器

​

浏览器 <- 响应数据 <- 服务器

开发环境 和 生产环境 以及英文"development", "production" 2个单词尽量会写会读

初始化包环境和package.json文件作用

npm下载的包和对应版本号, 都会记录到下载包时终端所在文件夹下的package.json文件里

package.json中的dependencies和 devDependencies区别和作用

* dependencies 别人使用你的包必须下载的依赖, 比如yarn add jquery

​

* devDependencies 开发你的包需要依赖的包, 比如yarn add webpack webpack-cli -D (-D 相当于 --save-dev)

终端的熟练使用: 切换路径, 清屏, 包下载命令等

切换路径 cd

​

清屏 cls 或者 clear

对base64字符串, 图片转base64字符串了解在线装换图片http://tool.chinaz.com/tools/imgtobase/