前端小白入门webpack之使用Vue的配置过程_unplugin-vue-define-options-优快云博客

本文详细介绍了在webpack中配置Vue的过程，包括通过npm安装Vue、解决runtime-only报错、配置webpack以解析Vue文件。同时，探讨了Vue中template与el的关系，并展示了Vue组件的一步步抽取和使用，最后讨论了如何省略.vue后缀并实现组件化开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

好的，终于到了如何在webpack中使用Vue，在webpack中我们依旧要采取：模块化、模块化、模块化的思想来配置Vue，好的，下面我们一起来进行学习。

1.既然我们要使用Vue，我们就需要Vue
之前我们引入Vue的方式有
1)下载引入
2)CDN引入
3)npm 安装
我们前面使用了那么多的npm指令，今天我们就采取使用npm的方式来安装Vue
安装指令为：

npm install vue --save

可能大家会有疑问，为什么之前我们使用的是–save-dev，而今天使用的是–save，因为vue是我们开发和运行时都需要依赖的，所以我们采用的时–save

2.下面我们在页面使用vue
1)首先我们在main.js中引入vue,并进行使用，这里相信大家已经非常熟悉啦

// 使用vue进行开发
import Vue from 'vue'
const app = Vue({
   
  el: '#app',
  data: {
   
    message: "hello webpack"
  }
})

2)到index.html中进行挂载

  <div id="app">
    {
   {
   message}