第一步: 安装依赖包
1.通过npm下载vue包;
2.webpack无法直接解析.vue文件,需要安装vue-loader,vue-template-compiler;
npm i vue -S
npm i vue-loader vue-template-compiler -D
3.安装以后还需要在webpack.config.js配置文件中添加rule, 对vue文件的处理规则,否则webpack无法处理vue文件。
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader'}
]
}
第二步:创建login.vue组件
<template>
<div>
<h2>这是通过.vue单文件定义的组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
第三步:在入口文件中定义vue实例,并注册组件
用render函数处理login组件
//先引入vue和.vue组件
import Vue from 'vue'
import login from './login.vue'
const vm = new Vue({
el: '#app',
data: { },
render: c => c(login)
//这里是简写形式,完整版应该是
// function (createElements) {
// return createElements(login)
//}
})