一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用

一文大白话讲清楚webpack基本使用------4------vue-loader的配置和使用

1. 建议按文章顺序从头看是看

2. vue-loader的配置和使用

2.1 vue-loader的使用

  • 前端开发少不了使用vue框架,我们在src目录下新建目录vue,然后在vue目录下创建App.vue

  • 当然先安装vue

js 复制代码
nom install vue
  • 然后完善App.vue
vue 复制代码
<template>
    <di class="show">{{show}}</di>
</template>
<script setup>
    import {ref} from 'vue'
    const show=ref('I`m App.vue')
</script>
<style scoped>
    .show{
    font-size: 18px;
    color: green;
}
</style>
  • 在main.js引入app.vue,并挂载到dom实例
js 复制代码
import {App} from './vue/App.vue'
import {createApp} from 'vue'
const app=createApp(App)
app.mount('#app')
  • 安装vue-loader
js 复制代码
npm install vue-loader
  • 配置在webpack.config.js配置vue-loader
js 复制代码
{
    test:/\.vue$/,
    loader:'vue-loader'
}
  • 因为vue-loader15.x版本以上需要使用VueLoaderPlugin来优化vue-loader的使用,所以我们还要配置一下vueLoaderPlugin插件
js 复制代码
const VueLoaderPlugin=require('vue-loader')
new VuewLoaderPlugin()
  • 然后我们重新构建
js 复制代码
npm run build
  • 然后浏览器执行index.html

  • 此时vue文件已经被构建好了

2.2 vue-loader的原理

  • vue-loader的作用是将.vue文件转化为javascript
  • 怎么转化,我们看到一个vue组件里面有template,script和style三部分组成
  • 所以vue-loader就是通过将vue文件中的这三部分拆分三后分别处理
  1. 将vue文件拆分成template,script和style三部分
  2. 通过compile将template生成render、staticRenderFns
  3. 获取script部分返回的配置对象scriptExports
  4. 通过css-loader,vue-style-loader将style部分添加到head中去。或者通过css-loader和MiniCssExtractPlugin将style提取到一个公共的css文件中
  5. 最后通过normalizer方法返回完成的组件配置项options
相关推荐
袁煦丞4 小时前
随机菜谱解救选择困难!YunYouJun/cook 成为你的厨房锦囊:cpolar内网穿透实验室第549个成功挑战
前端·程序员·远程工作
携欢4 小时前
PortSwigger靶场之CSRF where token is tied to non-session cookie通关秘籍
运维·服务器·前端
我是华为OD~HR~栗栗呀4 小时前
华为OD-21届考研-Java面经
java·前端·c++·python·华为od·华为·面试
詩句☾⋆᭄南笙4 小时前
CSS美化网页元素
前端·css·html
程序0074 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html
陈随易4 小时前
不使用 Husky 和 Lint-staged,实现 Git 提交前自动格式化代码
前端·后端·程序员
范特东南西北风4 小时前
roocode + vscode + api_key = free GPT-5
前端·ai编程
golang学习记4 小时前
从0死磕全栈之Next.js 缓存与数据重新验证
前端
BraveAriesZyc4 小时前
axios的使用
前端
没有鸡汤吃不下饭4 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js