vue第五天

最新推荐文章于 2022-04-15 20:12:29 发布
最新推荐文章于 2022-04-15 20:12:29 发布
阅读量10w+ 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32759777/article/details/103831979
版权
本文详细介绍了Webpack的使用，包括解决网页静态资源管理的问题、Webpack概念、安装方式、基本使用，以及如何配置实时打包、CSS与预处理器的打包、JS语法转换等，帮助理解Webpack在Vue.js项目中的应用。
摘要由CSDN通过智能技术生成

Vue.js - Day5 - Webpack

在网页中会引用哪些常见的静态资源？

  • JS
  • .js .jsx .coffee .ts（TypeScript 类 C# 语言）
  • CSS
  • .css .less .sass .scss
  • Images
  • .jpg .png .gif .bmp .svg
  • 字体文件（Fonts）
  • .svg .ttf .eot .woff .woff2
  • 模板文件
  • .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

网页中引入的静态资源多了以后有什么问题？？？

  1. 网页加载速度慢， 因为 我们要发起很多的二次请求；
  2. 要处理错综复杂的依赖关系

如何解决上述两个问题

  1. 合并、压缩、精灵图、图片的Base64编码
  2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的
了解本专栏 订阅专栏 解锁全文 超级会员免费看
东方佑
关注
专栏目录
订阅专栏
webpack+vue-cli项目中引入外部非模块格式js的方法
12-07
在开发vue的项目（我使用的是vue2）,需要添加js，虽然可以通过npm install 安装插件，但是如果有一些插件并没有开源，这时候我们只有脸上宽面条了。所以我更倾向于在webpack中引入外部js文件。 1.直接引用 Note:(红色标注部分) 位置1：将页面中需要用到的js，引入进来，from 后面是该js所在的文件目录； 位置2：需要用到位置一中定义的变量Swiper; 位置3：为防止eslint严格模式下报错，需要将位置2定义的swiper再次调用一下； 以上这篇webpack+vue-cli项目中引入外部非模块格式js的方法就是小编分享给大家的全部内容了，希望能给大家一个参考
Vue第五天.xmind
08-31
框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法创建挂载更新...
VueApi-05
Jack94727的博客
07-04 480
Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源？ JS .js .jsx .coffee .ts（TypeScript 类 C# 语言） CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件（Fonts） .svg .ttf .eot...
Vue(day5)
weixin_30270561的博客
03-28 103
一、监听数据变化的三种形式 假设我们需要提供两个输入框，分别输入姓和名，然后自动拼接为姓名。这样，我们就需要监听输入框的数据变化，让完整的姓名跟随输入的变动而变化。我们可以使用以下三种方式： 1、结合DOM事件使用mothod来监听数据变化 html代码：使用keyup事件来监听数据的改变。 <div id="app"> <input type="text" v-mode...
webpack在前端项目中使用心得一二
weixin_34194551的博客
04-29 264
webpack做文件合并 使用构建工具非常常用一个功能就是合并js和css文件，gulp和grunt都是编写相应的任务来完成，转到webpack突然懵逼了，简单的项目怎么做文件合并呢？其实只需把多个js文件同时引入到main.js（入口文件）中即可，css借助extract-text-webpack-plugin搞定。 不管是简单的纯展示...
零基础学Vue--day05
youzhabanzhuren的博客
03-01 215
1.路由的概念 路由的本质，就是一种对应关系：比如，在url地址中，输入要访问的地址，浏览器去请求，地址对应的资源； 那么 url地址，和真实的资源之间，就有一种对应关系，这就是路由； 路由分为： 1).后端路由：服务器端，根据不同的 URL请求，返回不同的内容； 本质：URL请求地址，与服务器资源，之间的对应关系；后端路由性能，相对前端路由来说较低； 2).前端路由：依靠hash值(锚链...
vue第五天笔记04——打包
08-23
在“vue第五天笔记04”中，我们可能涉及了以下几个核心知识点： 1. **Webpack配置**：Webpack是Vue项目中的默认构建工具，用于打包和优化应用。它允许我们自定义配置，如设置入口文件、输出路径、加载器、插件等。...
Vue第二天.xmind
08-27
1.node_modules # 项目依赖的第三方包 2.public # 静态文件目录 3.src # 业务文件夹 4.assets # 静态资源 5.components # 组件目录 6.App.vue # 整个应用的根组件 7.main.js # 入口js文件 8.gitignore # git...
Vue第七天.xmind
最新发布
09-03
5.用规则生成路由对象 6.把路由对象注入到new Vue实例中 7.用router-view作为挂载点, 切换不同的路由页面 vue路由-导航 1.声明式导航 1.基础使用 1.vue-router提供了一个全局组件 router-link 2.router-...
Vue第四天.xmind
08-31
 5.组件的选项：组件可以包含多个选项，如 data、computed、methods、props、events 等 组件之间的通讯：  1.Props：用于父组件向子组件传递数据。  2.自定义事件：子组件可以通过 $emit 触发事件，父组件可以...
cocos2dx-webpack-example:Webpack构建过程的Hello World
05-04
cocos2dx-webpack-example Webpack构建过程的世界。 如何设定 使用cocos new -l js <projectname>启动一个新项目用此仓库中的项目文件替换项目文件。 运行npm install 运行webpack来构建源，并运行webpack webpack-dev-server来监视源文件的更改并刷新浏览器。 建什么 src文件夹中建立了2个文件- vendor.js ，其中包含来自所包含的npm模块的所有代码bundle.js包含入口文件中的代码source/init.js 最终的js文件必须位于src文件夹中，以便Android构建能够正常工作。 您可能需要使用npm install -g webpack等在全局范围内安装webpack和webpack-dev-server。 检查此链接以获取Webpack参考
在项目中使用webpack
LPLIFE的博客
07-04 3009
1.新建一个项目,我的放在F盘中2.使用   npm  init 命令初始化这个目录3.使用命令:npm install webpack -save-dev     进行安装webpack4.新建src和dist两个文件夹接着使用编译器打开这个目录,我的是HBuilder然后在src中新建两个文件夹和在根目录下创建一个index.html文件,1)新建index.html文件2)在script文件...
vue.jsDay5
TianBowen的博客
12-18 190
02-全局组件和局部组件的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn&gt...
如何在项目中配置webpack
qq_43599049的博客
03-18 881
Getting Started with c-create-react-app 通过c-create-react-app可以自动配置webpack 简介： 脚手架模板：https://github.com/QunLin666/c-react-cli c-create-react-app是一个更全面的react脚手架，相较于传统的creact-react-app，还集成了typescript、eslint、pritter、commitizen、husky，将开发者从繁琐的配置之中解脱出来，并且方便开发者基于此
(VueJs)Webpack配置Vue
黑胡子大叔的博客
04-10 159
安装Vue的三种方式 直接下载引入 下载vue.js <script src="vue.js地址"></script> CDN引入 <!-- CDN引入外部资源 --> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></scrip...
项目中安装和配置webpack
weixin_44399953的博客
08-15 252
打开项目目录终端，输入命令: npm install webpack webpack-cli -D 然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack, 在 webpack.config.js 文件中编写代码进行webpack配置，如下： module.exports = { mode:"development" // 可以设置为development(开发模式), production(发布模式) } 补充： mode设置的是项目的编译模式.
【Webpack】 概述 + 安装 + 在项目中的用法（详细步骤：打包JS，打包CSS）
Zhou_LC的博客
04-13 232
前言：学习自https://www.bilibili.com/video/BV1BU4y147pS?p=29 文章目录Webpack一、概述二、安装三、在项目中的用法 Webpack 一、概述 二、安装 全局安装 npm install -g webpack webpack-cli 检验 webpack -v 三、在项目中的用法 1、在项目文件夹下，创建一个nodejs项目：npm init -y 2、创建一个src目录 3、在src存放两个需要合并的util.js和common.js 4、准.
使用webpack打包vue项目
热门推荐
qq_42750982的博客
04-15 1万+
使用webpack打包vue项目 安装webpack工具，安装方式有两种：全局安装（命令：npm install -g webpack webpack-cli）以及安装在项目中，这里使用第二种： //在项目中安装，这里的-D表示运用到开发(development)环境 npm install -D webpack webpack-cli 在项目根目录新建一个webpack.config.js文件，配置打包时候需要的一些插件。**作用: 指示 webpack 干那些活(当你运行 webpack 指令
webpack安装与基础命令
july_29的博客
10-11 209
在使用webpack之前我们需要把npm安装好。 1.初始化文件夹 npm init -y 2.在开发环境安装webpack和webpack-cli npm install webpack webpack-cli -D 3.创建一个src文件夹来放我们的资源文件，里面创建一个名为index.js的入口文件，这个入口文件名在package.json中有定义 4.终端输入 webpack --mode development 打包得到一个dist文件，里面包含打包好的js文件，这是开发环境的，可以把develo
Vue框架入门：第一天学习总结
5. **虚拟DOM**：Vue使用虚拟DOM，提高性能的同时降低了DOM操作的复杂性。 安装Vue.js有多种方式： 1. **CDN引入**：可以直接在HTML中链接Vue的CDN版本，快速开始。 2. **下载和引入**：从官方网站下载Vue.js文件，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方佑

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值