webpack中使用vue实战-3(vue组件)_如何在jq webpack 老项目中使用vue3 组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_42759726/article/details/119980616

一.导入vue模块

在项目js入口文件main.js中导入vue模块

src/main.js

//项目js入口文件
import Vue from "vue";

二.编写vue组件

定义一个.vue结尾的组件,其中组件由三部分组成:template script style

src/App.vue

<template>
    <div><h1>这是一个app组件</h1></div>
</template>
<script>
export default {
    
}
</script>
<style>

</style>

三.导入vue组件

在main.js中使用import ... from ...导入组件

src/main.js

//项目js入口文件
import Vue from "vue";
import app from "./App.vue";

四.创建vue的实例

创建vue的实例 ,并使用render函数渲染组件

src/main.js

//项目js入口文件
import Vue from "vue";
import app from "./App.vue";


var vm = new Vue({
    el: '#app',
    render: c => c(app)
})

五.创建vm的控制区域

在index.html中创建一个id为app的div元素(如果不存在的话),作为vm实例要控制的区域

src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack中使用vue</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

六.测试vue组件是否引入成功

npm start 启动项目,将会在浏览器上看到