Vue学习Day8 .vue文件封装处理、vue的使用方案、webpack中的plugin、搭建本地服务器

最新推荐文章于 2023-09-20 21:51:15 发布
最新推荐文章于 2023-09-20 21:51:15 发布
阅读量256 收藏
点赞数
分类专栏： vue学习 文章标签： vue vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gegegegege12/article/details/118654508
版权

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第8天！

起起伏伏乃人生常态，继续加油～

学习内容

1. el和template的区别

可以正常打包并运行后，我们来考虑另一个问题：

  • 如果希望将vue实例中data的数据显示在页面中，就必须要修改index.html
  • 如果我们后面自定义了组件，也必须修改index.html来使用组件
  • 但是HTML模板在之后的开发中，并不希望手动的来频繁修改，该怎么做？

定义template属性：

  • 我们可以将HTML模板中div元素中的内容删掉，只保留一个基本的id为app的元素

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

那么el和template模板的关系是什么呢？

  • 在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等
  • 而如果Vue实例中同时指定了template，那么template模板中的内容会替换掉挂载的对应el的模板

这样做的好处？

  • 以后的开发中不需要再次操作index.html了，只需要在template中写入对应的标签即可

但是template模板放在vue实例中看起来会很冗杂
我们要将template模板中的内容进行抽离

2. vue组件化开发引入

在这里插入图片描述
但是写在这些写在main.js中还是有些繁琐，App实际是个对象，可以进一步抽离，src文件夹下新建一个vue文件夹
在这里插入图片描述
在app.js中导入
在这里插入图片描述在这里插入图片描述

3. .vue文件封装处理

但是像上面这样写，一个组件以一个js对象的形式进行组织和使用是非常不方便的，在app.js中我们的模板和js代码没有进行分离
而且如果有样式的话，我们写在哪里呢？

现在我们以一种全新的方式来组织一个vue的组件
在vue文件夹下新建一个App.vue文件
在这里插入图片描述
App.vue中的内容：
在这里插入图片描述
现在尝试用webpack打包，npm run build，会报错
因为App.vue加载不出来，要配置对应的loader
在这里插入图片描述

4. 安装vue-loader、vue-template-compiler

我这里指定了vue-loader版本15.4.2，vue-template-compiler版本2.5.21，(不加版本号应该会自动下载最新版

npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21

修改webpack.config.js的配置文件：
在这里插入图片描述
但当我们npm run build会发现，并不能成功
原因是vue-loader在15.x.x版本之后，如果要使用，需要配置相应的插件vue-loader-plugin
在这里插入图片描述
这里就直接在package.json中改了vue-loader的版本号，再重新终端安装一下，npm install就好
在这里插入图片描述

5. vue的使用方案

新建一个cpn.vue文件
在这里插入图片描述
结构和App.vue中一样
在这里插入图片描述
在App.vue中导入、注册并使用cpn组件
在这里插入图片描述
之后我们的应用程序就是一颗组件树，App.vue就作为我们的根组件，会在根组件中引用其他组件，每个组件都会是一个独立的文件

6. plugin

plugin是什么？

  • plugin是插件，通常是用于对某个现有的架构进行扩展
  • webpack中的插件，是对webpack现有功能的各种扩展，比如打包优化、文件压缩等

loader和plugin的区别：

  • loader主要用于转换某些类型的模块，它是一个转换器
  • plugin是插件，它是对webpack本身的扩展，是一个扩展器

plugin的使用过程：

  • 第一步：通过npm安装需要使用的plugins(某些webpack已内置的插件不需安装)
  • 第二步：在webpack.config.js中的plugins中配置插件

添加版权的plugin

我们先来使用一个最简单的插件，为打包的文件添加版权声明

  • 该插件名字叫BannerPlugin，属于webpack自带的插件

修改webpack.config.js的文件：

在这里插入图片描述
重新打包程序，查看bundle.js文件的头部，看到如下信息：

在这里插入图片描述

打包html的plugin

目前我们的index.html文件是存放在项目的根目录下：

  • 但是，在真实发布项目时，发布的是dist文件夹下的内容
  • 我们需要将index.html文件打包到dist文件夹中
  • 这时候可以使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以做的事情：

  • 自动生成一个index.html文件(可以指定模板来生成)
  • 将打包的js文件，自动通过script标签插入到body中

安装HtmlWebpackPlugin插件：
(我这里指定了安装版本3.2.0)

npm install html-webpack-plugin@3.2.0 --save-dev

修改webpack.config.js的文件：

  • 这里的template表示根据什么模板来生成index.html
  • 我们需要删除之前在output中添加的publicPath属性
  • 否则插入的script标签中的src可能会有问题

在这里插入图片描述

⚠️：选为模板的index.html中可以不用引入bundle.js了，一起打包后会自动生成的
并且要注意选为模板的index.html的路径(我的index.html在src文件夹下)
在这里插入图片描述
npm run build后，会发现成功打包到了dist文件夹下
（各个文件之间的依赖webpack会帮我们处理好的）
在这里插入图片描述

压缩js的plugin

项目发布之前，我们必然需要对js文件进行压缩处理

  • 使用一个插件uglifyjs-webpack-plugin

安装uglifyjs-webpack-plugin：
(我这里指定了安装版本1.1.1)

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件：

在这里插入图片描述
查看bundle.js，成功压缩
（但是会删除掉我们的注释，所以这个plugin和生成版权声明的那个plugin应该只能同时用一个）

在这里插入图片描述

7. 搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个服务器基于node.js搭建，内部使用express框架，可以实现：让浏览器自动刷新显示我们修改后的结果

  • 不过它是个单独的模块，在webpack使用之前需要先安装它
npm install webpack-dev-server@2.9.1 --save-dev

devserver是作为webpack中的一个选项，选项本身可以设置如下属性：

  • contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里填'./dist'
  • port：端口号
  • inline：页面实时刷新
  • historyApiFallback：在SPA页面中，依赖HTML5的history模式

修改webpack.config.js文件：
在这里插入图片描述
尝试运行时，如果输入webpack-dev-server它会在全局查找，但是找不到，就会报错，其实应该输入：

node_modules/.bin/webpack-dev-server

但是每次都输入这一长串命令很麻烦，所以最好先在package.json中配置一下
在这里插入图片描述
配置完之后，在终端输入npm run dev，它会默认先在本地找
在这里插入图片描述
点击http://localhost:8080/就可以启动本地服务了，默认端口8080
之后再修改代码，不用刷新，它会自动更新（虽然有点慢）

配置改成，可以不用手动点链接，直接跳转

"dev": "webpack-dev-server --open"
AIpoem
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-builder-webpack-plugin:Webpack插件自动构建vue文件
05-13
vue-builder-webpack-plugin Webpack插件自动构建vue文件在处理vue文件时，编辑器是否存在问题？ 这个给你您是否要分离vue文件？ 这个给你您只是不喜欢拥有vue文件？ 这个给你您可以使用此插件自动生成.vue文件。...
记录vue需要安装的loader和plugin
m0_52173534的博客
06-25 976
1.全局安装webpack 打包工具 npm install webpack webpack-cli -g 2.解析css 和 展示样式的loader --save-dev开发时需求 npm install css-loader style-loader --save-dev 3.解析url 背景图片或者需要地址的时候 npm install url-loader --save-dev 4.解析.vue文件 模块化 组件 npm install vue-loader vue-te
Vue和Webpack、loader、plugin详解
草木红的博客
05-15 2587
(一) 安装Webpack 安装webpack首先要安装Node.js（版本大于9.0），Node.js自带了软件包管理工具npm 查看自己的node版本： node -v 全局安装webpack（版本号为3.6.0，因为vue cli2依赖该版本） //检查自己是否安装了webpack webpack --version //如果没有安装则运行下边代码,梯子安装更快捷 npm install webpack@3.6.0 -g 局部安装webpack（后续才需要） //进入到对应的项目文件
vue安装步骤（详细版）
最新发布
梦旅人的博客
09-20 1万+
vue的安装笔记
vue-loader-plugin
lxhzz0411的博客
08-23 3595
webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin 个人分类： webpack 场景 . webpack2.4.*集成vue-loader@15.2.4报错 1 2 vue-loader was used without the corr...
vue-loader和vue-template-compiler安装的问题
weixin_45344741的博客
08-29 1700
这是vue和vue-template-compiler版本不一致导致的。查看vue-template-compiler版本。
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
11-20
楼主最新对已做项目进行打包优化，配置了打包环境下去除console.log语句插件—使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-webpack-plugin -D const UglifyJsPlugin = require('uglifyjs-...
vue-plugin_webpack.rar
07-22
利用webpack将打包vue成vue-plugin，只需要修改src文件中index.js导入的工程即可打包成功
基于 vue-skeleton-webpack-plugin 的骨架屏实战
11-30
前言 目前正在做的项目，登录是需要跳转到别人的页面的，导致重定向很多，需要优化一下白屏时间，所以就用到了骨架屏，但是这次用的骨架屏不是自动生成的，还是...本文主要围绕一个开源的 Webpack 插件 vue-skeleton
vue学习问题记录--vue和vue-template-compiler版本不匹配
qq_44161722的博客
08-29 2009
解决：执行npm install之后 ，直接npm install vue-template-compile，就能正常运行了，这样之后的情况是vue-template-compile的版本比vue要高。查了一天都是在说先把vue-template-compiler卸载了，再重新下，可我只要卸载了之后再安装就会报错。安装vue-resource：cnpm i vue-resource --save。问题：vue和vue-template-compiler版本不匹配的问题。......
Webpack5 vue-loader和VueLoaderPlugin
有趣的小良的博客
07-25 1732
它会读取 .vue 文件的内容，并根据配置对其中的模板、样式和脚本进行相应的转换和编译，最终生成可在浏览器运行的 JavaScript 模块。它的作用是将 .vue 文件中的模板、样式和脚本进行编译，并将其转换为 JavaScript 模块，以供Webpack打包使用。简单来说，VueLoaderPlugin 是一个插件，用于告诉 webpack 如何处理和解析 .vue 文件，而 vue-loader 则是实际执行加载和转换 .vue 文件的加载器。例如，你可以在组件的样式中这样用 SASS。
Vue2之webpack篇（二）Loader
申小兮和林小兮的博客宝
04-12 6312
loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参
安装vue-loader因版本过高报错问题的解决方法记录
asfcyg的博客
04-28 1万+
安装vue-loader运行时报错 这个错误是指vue-loader在14版本以上，需要安装另外的插件。 这个错误有两个解决方法 方法一： 进入package.json文件中，找到vue-loader的版本 将它改为^13.0.0指会自动匹配13.x.x中的最新版本，但是不会匹配到14.0.0 和^(插入符号)一对还有一个符号~(波浪符号) ~13.3.0指会匹配更新到13.3.x的最新版本，但...
解决Vue项目中的“Cannot find module ‘vue-template-compiler‘”错误
Sun_blog
09-18 7588
在Vue项目中遇到“Cannot find module ‘vue-template-compiler’”错误时，我们可以通过安装vue-template-compiler模块、检查Vue版本、清除缓存并重新安装依赖、检查webpack配置以及检查其他依赖模块等方法来解决问题。希望本文对你解决这个错误有所帮助！
Error: Cannot find module ‘vue-template-compiler‘解决vue跑项目报的问题
m0_62725795的博客
07-14 1102
解决方法三：手动升级或降级依赖版本 你可以手动升级或降级依赖的版本，以解决依赖冲突。参数来安装依赖，它将启用旧版本的依赖解析算法，可能可以解决依赖冲突问题。运行以下命令尝试使用。请注意，在手动修改依赖版本时，确保所选择的版本是相互兼容的，以避免引入其他问题。的版本要求，你可以尝试将它们的版本进行调整，使其符合要求。文件中找到这两个依赖项，然后手动修改它们的版本号，再运行。参数来强制解决依赖冲突。运行以下命令尝试使用。参数 你可以在安装依赖时使用。参数 你也可以尝试使用。然后删除项目目录下的。
vueLoadPlugin和import
weixin_44030736的博客
10-28 333
文章目录VueLoaderPlugin引入配置错误import使用花括号{}和不使用花括号的区别使用{}不使用{} VueLoaderPlugin vue-loader在15版本之后需要配合vueLoadPlugin才可以使用 引入 const { VueLoaderPlugin }= require('vue-loader'); 配置 module.exports = { //... ...
【前端Vue】Vue安装的四种方式：引用Vue.js文件、使用CDN方法、利用npm方法、命令行工具CLI以及区分Web App、Native App、Hybrid App
量化Mike
11-08 1997
Vue.js不支持IE 8及以下版本，因为它使用了IE 8无法模拟的ECMAScript 5特性，但它支持所有兼容ECMAScript 5的浏览器。
vue初始化项目时报错： Error: Cannot find module ‘vue-template-compiler‘
热门推荐
二三的博客
07-14 1万+
出现这个问题的原因是缺少了 ‘vue-template-compiler’ 模块。这类问题解决方案基本上都一样，网上也很多，在这里我写个随笔记录下。1、在项目内运行命令： 2、全局安装 使用上面两个任意一个方案即可，输入 命令，即可成功启动项目...
Vue Cli3 添加Loader和plugin
milugloomy的博客
11-01 4072
添加loader 在vue.config.js中的chainWebpack中添加配置： chainWebpack: config => { // my-loader为loader的别名，./src/myLoader.js是loader的位置 config.resolveLoader.alias.set('my-loader', path.resolve(__dirname, './src/myLoader.js')) // 修改vue文件Loader的选项，增加新的处理loader c
vue项目中webpack.config.js文件的作用
06-07
`webpack.config.js`是Vue项目中Webpack的配置文件，它定义了Webpack打包过程中的各种行为和规则。在Vue项目中，`webpack.config.js`的作用是为Webpack提供了一些配置参数，以使Webpack能够正确地处理和打包Vue应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值