vue 学习20220323

遇到问题1
用webpack打包 指定了要处理的文件 ,进行打包时 报错
问题2
安装只要修改代码随时编译的插件 ,修改后去不编译

原因是应为没有下载webpack包
npm install webpack --save-dev

模块化 :js模块化 ,css的模块化
组件化 :抽取
规范化 :正规店
自动化 :自动部署

前段工程化 webpack

webpack
vue 学习20220323_第1张图片
-D 是放在 开发环境节点下 devDependencies
-S是放在 开发和上线环境节点下 dependencies

先下载包
npm install [email protected] [email protected] -D
配置
运行
vue 学习20220323_第2张图片运行
vue 学习20220323_第3张图片webpack 打包命令 npm run dev
webpack 是先读取配置文件 再去选择模式 再去运行脚本

使用插件 自动编译 时时自动打包
1 先安装 npm install [email protected] -D
2修改packge.json -->scripts 的dev
3在运行npm run dev 重新进行项目打包

会把打包的文件放在内存 ,没有在硬盘上

webpack-dev-server工作原理
1 一打开浏览器他会自动展示html页面
2 这个插件没有把生成的插件放到位磁盘上 是放在项目的更目录下
localhost:8080/main.js,是放在内存 虚拟的,内存快

一进到8080页面想看到index.html页面
需求把src的目录下的index.html页面复制到8080页面

安装
1 npm install [email protected] -D

vue 学习20220323_第4张图片
运行后让浏览器自动打开页面
再节点中添加
vue 学习20220323_第5张图片
load作用

webpack处理的文件有限,load处理 非.js的结尾的文件

vue 学习20220323_第6张图片
怎么使用
vue 学习20220323_第7张图片
vue 学习20220323_第8张图片

vue 学习20220323_第9张图片先下载
npm install [email protected] [email protected] -D
配置 文件
导入
运行

处理 less文件
vue 学习20220323_第10张图片
先下载导入
npm install [email protected] [email protected] -D

webpack处理url路径

vue 学习20220323_第11张图片vue 学习20220323_第12张图片在这里插入图片描述装饰器
vue 学习20220323_第13张图片vue 学习20220323_第14张图片在这里插入图片描述
vue 学习20220323_第15张图片vue 学习20220323_第16张图片
发布
vue 学习20220323_第17张图片vue 学习20220323_第18张图片
–mode覆盖配置类的 model值

把编译后的文件统一放到一个文件中
图片
在这里插入图片描述
js文件
vue 学习20220323_第19张图片
让webpack自动删除 旧的dist文件
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

看文档

Source Map 存储这文件信息(记录代码的行号)
调错时用的到,是编译后的代码
vue 学习20220323_第20张图片vue 学习20220323_第21张图片安全性
在这里插入图片描述不安全 既可以暴露行号又可以暴露代码
在这里插入图片描述
vue 学习20220323_第22张图片
拓展
路径
第一种情况 如果在里面的文件需要引入外面的文件 ,需要返回到于引入的文件平级 从里往外
在这里插入图片描述
第二种情况 如果外面的文件需要里面的文件 直接从更目录里面写起 从外往里

@使用
./ 代表 src目录
vue 学习20220323_第23张图片
vue学习工具
在这里插入图片描述

你可能感兴趣的:(前端,java)