1）建立login.vue 文件，和index.html main.js平级
<template>
<div>
<h1>使用文件定义login组件</h1>
</div>
</template>
<script>
</script>
<style >
</style>
2）main.js文件中引入
import Vue from "vue"
//导入模板
import login from "./login.vue"
3)webpack 不能解析.vue文件
安装
vue-loader vue-template-compiler
4）在配置文件webpack.config.js中新增配置项
module: {
rules: [
{test:/\.vue$/,use:'vue-loader'},
]
},
5）在配置文件webpack.config.js中添加控件
const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins: [
new VueLoaderPlugin()
]
index.html中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="/bundle.js"></script>
</html>
main.js文件内容
import Vue from "vue"
import login from "./login.vue"
var vm=new Vue({
el:"#app",
data:{
msg:"123"
},
render:function (creat) {
return creat(login)
}
})
因为是用render方式引入的组件，所以body中的div#app不存在了，替换为login.vue组件中template的内容
网友评论