步骤:
- 安装 vue 的包:
cnpm i vue -S
- 由于在webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件 的 loader
cnpm i vue-loader vue-template-compiler -D
- 在 main.js 中,导入 vue 模块
import Vue from 'vue'
- 在根目录下定义一个 .vue 结尾的组件,其中,组件有三部分: template、script、style
- 使用
import login from './login.vue'
导入这个组件 - 创建 vm 实例
var vm = new Vue({el:'#app',render : c => c(login) })
- 在页面中创建一个 id 为 app 的 div 元素,作为我们vm实例 要控制的区域
main.js 文件中的代码
// 注意:在 webpack 中,使用 import Vue from 'vue'; 导入的Vue构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供 像网页中那样引用的使用方式
import Vue from 'vue';
// 1. 导入 login 组件
import login from './login.vue'
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
// render: function (createElements) { //在 webpack 中,如果想要通过 vue ,把一个组件
// // 放到页面中去展示,vm 实例中的 render 函数可以实现
// return createElements(login)
// }
// render 函数简写
// 不要大括号,直接返回,可以省略 return
render: c => c(login)
})
login.vue 文件中的代码
<template>
<div>
<h1>这是登录组件,使用 .vue 文件定义出来的</h1>
</div>
</template>
<script>
</script>
<style>
</style>
处理 .vue 文件的第三方loader 安装与配置
在上一篇
vue-loader@15.x VueLoaderPlugin
中有详细配置
注意:
render 函数 会把 el 指定的容器中的内容,全部清空覆盖!!!!!!!!!!!