18.安装webpack 默认不识别 .vue结尾文件,需要安装loader
安装
module: { //这个节点用于配置所有第三方模块,加载器
rules: [
{test: /\.vue/, use: 'vue-loader'} //处理.vue结尾的文件
]
},
cnpm i vue-loader vue-template-compiler -D
配置webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
new VueLoaderPlugin()
],
module: { //这个节点用于配置所有第三方模块,加载器
rules: [
{test: /\.vue/, use: 'vue-loader'} //处理.vue结尾的文件
]
},
在src下 新建login.vue 内容如下
<template>
<div>
<h1>这是用 .vue文件组件</h1>
</div>
</template>
<script>
</script>
<style>
</style>
在index.js中加入
import login from './login.vue'
var vm = new Vue({
el: '#app',
data: {
msg: 'vue 来了'
},
render: function(createElements){
return createElements(login)
}
})
render会覆盖div#app的全部内容