14.webpack ----Vue源码的打包

1.首先安装依赖，并且在mian.js引入

import {createApp} from 'vue'
 
//vue代码
const app=createApp({
template:`<h2>我是vue渲染出来的</h2>`
data(){
return {
title:"Hello world"
}}})
app.mount("#app") //挂载到某个地方

2.安装vue3的版本：npm install  vue@next

3.VSCode对SFC(单文件组件)的支持

插件一：Vetur, 从Vue2开发就一直在使用的VSCode支持Vue的插件；

插件二：Volar,官方推荐的插件（后续会基于Volar开发官方的VSCode插件）

4.编写App.vue编码

<template>
<h2>我是Vue渲染出来的</h2>
<h2>{{title}}</h2>
</template>
 
<script>
//倒出一个对象
export default{
data(){
return{}
},
methods:{}
}
</script>
<style>
</style>

5.在main.js里面做倒入

import App from './vue/App.vue';
 
const app=createApp(App);
app.mount("#app");

后期在编译的时候会出错，出错原因是缺少一个模块，读不出来vue的文件格式，解决方案：

安装vue-loader并且在webpack.config.js里面配置

npm install vue-loader@next -D

然后在打包还是会出错，提示vue-loader 需要依赖@vue/compiler-sfc

 安装：@vue/compiler-sfc这个包,真正的对vue文件来做解析

npm install @vue/compiler-sfc -D

你会发现在次打包的时候还是会出错，告知你vue-loader 没有正确使用plugin

并且倒入