vue学习第一天记录（webpack插件）

最新推荐文章于 2026-08-23 15:47:42 发布
原创 最新推荐文章于 2026-08-23 15:47:42 发布 · 184 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
15 篇文章 1 人学习
订阅专栏 查看详情
本文详细介绍了如何使用webpack进行代码打包、配置html-webpack-plugin插入动态脚本，以及loader处理各种文件类型。重点讲解了开发与生产环境的配置，包括source-map和文件路径优化。

插件安装

1.安装'webpack ' 。代码中会有兼容性等问题，可以用webpack解决，
2.安装'webpack-dev-server' 。修改源代码之后实时打包编译
3.安装'html-webpack-plugin '
（1）复制html文件放到根目录中（内存中）
（2）在复制html文件中自动注入一个脚本，引入内存中的bundle.js
4.安装'loader'脚本，处理css/less/高级js语法等webpack处理不了的文件，处理之后转交给webpack放入到bundle.js中
5.安装'clean-webpack-plugin'。打包自动清理旧文件
6.配置'source-map'，在开发模式下源码位置和打包出来文件位置一致
7.在开发模式下用'source-map',生产环境下删除该配置或者改成‘nosources-source-map’
开发模式注重调试，生产环境注重安全性。
8.在webpack配置‘@’，定位目录
9.js和图片存放位置优化，在webpack配置中的rules添加img文件存放位置，outPut=images，在output文件下修改存放文件名字

标签
#vue.js #node.js
vue-cli2升级webpack4记录
jean850218的博客
03-26 1476
目录结构分析，找出配置文件 这个项目是由vue-cli2生成的，我们先来看看现有的目录结果，找出我们需要改代码的地方，打开各文件查看，找到我们需要修改文件的地方存于放build和config两个目录下： 这次我们修改的js文件主要有以下三个： ./build/webpack.dev.conf.js ./build/webpack.prod.conf.js ./config/webpa...
【Vue3 知识点总结】导航(路由)守卫
这是个栗子的博客
08-20 369
本文系统介绍了Vue Router的导航守卫机制。导航守卫是Vue项目中路由管理的核心功能，用于在路由跳转过程中进行拦截和处理，主要解决登录鉴权、权限控制、数据预取、页面行为管理等问题。文章详细讲解了三种导航守卫：全局守卫（beforeEach、beforeResolve、afterEach）、路由独享守卫（beforeEnter）和组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave），分别阐述了它们的作用时机、适用场景和代码示例。最后强调了使
Vue之webpack的使用
旺财飞飞飞的博客
11-17 3049
文章目录一、webpack的基本使用 一、webpack的基本使用 webpack的作用：就是把JS相互依赖的模块打包 //下面是模块info.js const name = "张三" const age = 18; export { name, age }; --------------------------------------------- //下面是模块main.js import { name, age } from './info' console.log(name); con
前端进阶完整教程（Vue 3 + TypeScript）
爱上编程已很久
08-22 24
【重点】箭头函数的 继承自外层作用域，不能用作构造函数，没有 对象。 数据流向：箭头函数捕获外层 的 ，因此能正确访问 。【易错点】不要用箭头函数定义对象方法；事件监听器中要访问触发元素请用 。 数据流向：从 对象提取 并重命名为 ，提取嵌套的 为 。【易错点】数组解构中 必须在最后；嵌套对象解构注意变量名冲突。 展开运算符 数据流向： 仅复制第一层，嵌套对象仍是同一引用。【易错点】深拷贝可用 或递归实现。 【易错点】 中返回普通值会自动包装为 Promise；忘记 会导致未处理拒绝。
记录webpack3升级webpack4各插件版本以及webpack配置变化
qq_44774831的博客
11-18 1771
记录webpack3升级webpack4各插件版本以及webpack配置变化针对npm run dev时会出错调整1)依赖插件版本调整先2)针对vue-loader进行webpack配置改造修改 webpack.base.conf.js修改 webpack.dev.conf.js修改 webpack.prod.conf.js针对npm run build出现问题解决error1: 升级extract-text-webpack-plugin插件error2:error3: 使用config.optimizat
vue webpack3升级webpack4 踩坑记录
Mr_Renhappy的博客
12-31 1173
vue webpack3升级webpack4 踩坑记录 1 webpack4 需要node.js版本>= 10 2先卸载旧版本插件，重新安装新版本插件 webpack4版本中cli工具分离成了webpack核心库与webpack-cli命令行工具两个模块 npm uninstall webpack webpack-bundle-analyzer webpack-dev-server webpack-merge -D npm install webpack webpack-cli webp.
记录webpack2升级至webpack4
wangjunjie_97的博客
01-14 1400
记录webpack2升级至webpack4 1、更新webpack下载webpack-cli node版本要6以上 npm install webpack@4 -D npm install webpack-cli@3 -D 下面这种报错就是插件版本问题 TypeError: Cannot read property 'xxx' of undefined "webpack": "^4.44.2", "webpack-cli": "^3.3.12", 警告暂时没有解决 (node:43802) Deprec
webpack构建vue3项目
weixin_55508765的博客
01-16 3103
在前端工作中，开发vue的话，基本上使用的是基于vue-cli vite等构建的，基于其原理，借鉴了很多大佬的经验，本文记录了使用Webpack从零开始搭建一个TS+Vue3项目的步骤，给大家分享一下。文章后面有源码，包版本。使用的node和pnpm版本如下。
关于vue方面webpack学习记录
qq_36239253的博客
09-21 163
webpack 安装 npm install webpack —save-dev(开发环境) webpack 配置文件webpack.config.js module.exports = { entry: './src/main.js',//入口文件 output: {//输出文件 // path:绝对路径, path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', // publicPath:
学习使用webpack+vue搭建项目
Bonjourjw的博客
12-18 3108
最近，一直把JS基本语法知识重新巩固学习的同时，也一直在跟着上篇文章中提到的名为“守候”的博主发表的文章进行学习，今天也将自己在通过他的文章使用webpack+vue搭建项目环境的过程中遇到的值得记录的点，都一并写在这里
Vue-webpack学习记录
m0_49471668的博客
12-22 857
真正的前端开发： 模块化（js的模块化，css的模块化，资源的模块化） 组件化（复用现有的UI结构，样式，行为） 规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理） 自动化(自动化构建，自动部署，自动测试) 前端工程化的解决方案 webpack 好处： 1.解决代码压缩混淆；处理浏览器端 JavaScript 的兼容性，性能优化 2.让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性 a.在浏览器中会请求js和css文件，这些..
10分钟快览Vue3、Vuex、Pinia 常用知识点、差异与优缺点
xyphf的博客
08-18 307
使用定义 store两种风格：（类似 Vuex）（Composition API 风格，推荐）})})// 访问: store.state.count})// 访问: counter.countgetters: {// 访问: store.getters.doubleCount// 访问: counter.doubleCountComposition API 提供更灵活的代码组织方式更好的性能（响应式系统优化、Tree Shaking、更小的 bundle）
Vue Router 4.x风格导航守卫全面升级
梦曦i的博客
08-18 182
uni-router v2.2.0 版本带来两项重要更新：1）彻底移除 next() 回调模式，统一采用返回值模式；2）新增 onBeforeRouteLeave 组件内离开守卫。本次升级使守卫系统与 Vue Router 4.x 完全一致，解决了表单编辑等场景下无法优雅拦截页面离开的问题。组件内守卫支持同步/异步操作，自动随组件卸载清理，无需手动管理全局守卫。迁移时需将所有 next() 调用改为对应的返回值形式，路由拦截逻辑现可更自然地封装在组件内部。
Vue 入门基础：响应式原理、模板语法与常用指令详解
2501_91671229的博客
08-19 181
Vue 的核心是响应式数据和声明式渲染，先理解“改数据即可更新页面”。插值适合文本，v-text和v-html用于内容指令，v-show和v-if用于条件显示。使用@事件绑定行为，方法统一写在methods中；使用:属性绑定动态属性。v-html存在 XSS 风险，只渲染可信内容；用户输入应使用默认插值转义。旧项目可能使用 Vue 2，新项目通常使用 Vue 3，启动方式和 API 风格应保持一致。
八、uni-app页面调用接口
nsdhakshda的博客
08-20 275
本文介绍了uni-app中三个关键API的使用方法及注意事项
基于 Spring Boot + Vue 的 AI 智能在线订餐系统
我滴小博客
08-20 224
本文介绍了一个基于Spring Boot和Vue 2开发的智能在线订餐系统，实现了完整的点餐闭环和AI语义推荐功能。系统包含用户、商家和管理员三类角色，支持优惠券、积分、评价、实时聊天等模块，并创新性地集成了阿里云百炼Embedding技术，通过向量化计算实现自然语言菜品推荐。采用前后端分离架构，使用WebSocket实现实时通信，MyBatis-Plus操作MySQL数据库。项目亮点在于将传统点餐业务与AI技术结合，用户可通过自然语言描述获取个性化推荐，提升了用户体验。系统功能完整，涵盖从菜品浏览、购物车
Vue 进阶实战：事件修饰符、表单控制、购物车与 Ajax 请求
2501_91671229的博客
08-21 203
箭头函数适合回调，重点理解它没有自己的this；Vue 的方法本身不要随意改成箭头函数。for...in遍历键，for...of遍历值，数组还可以使用forEachmapfilter等方法。事件修饰符负责冒泡、默认行为和触发次数；按键修饰符让键盘交互更直观。复选框的v-model可以绑定布尔值或数组，购物车应使用唯一key、计算属性和清晰的全选逻辑。axios 适合 Vue 项目中的接口请求，跨域问题需要由后端 CORS 配置配合解决。
基于 Vue 3 + ECharts + Three.js + Express + SQLite——智慧城市数字孪生可视化平台
weixin_66547608的博客
08-20 275
摘要：本项目基于Vue3+Three.js+ECharts等技术栈，构建了一个智慧城市数字孪生可视化系统。系统包含3D孪生大屏（支持城市全景、交通、能源等五大主题场景交互）、多类型数据可视化图表、业务数据管理、用户权限控制、智能预测（支持参数调参和图片特征分析）等功能模块。采用前后端分离架构，前端使用Vite构建，后端基于Express+SQLite实现数据服务，提供JWT鉴权和细粒度权限控制。系统适合作为智慧城市、数字孪生等领域的教学演示或项目原型，具备完整的CRUD、Excel导入导出、系统样式配置等管
Vue3电商项目实战核心架构
最新发布
2301_78108987的博客
08-23 194
以下通过一个电商项目（如“小兔鲜”）的核心模块，展示 Vue3 项目开发中的关键技术实现。1. 项目结构与核心配置使用 Vue CLI 或 Vite 创建项目后，典型结构如下： 路由配置示例 (Vue Router4)： 路由懒加载可提升应用初始加载速度 。2. 状态管理 (Pinia)Pinia 是 Vue3 推荐的状态管理库，比 Vuex 更简洁。定义 Store： 在组件中使用： Pinia 提供了更直观的 Composition API 风格状态管理 。3. 组件开发与逻辑复用使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值