Webpack+vue2.0如何注册全局组件 (01)

Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件?

就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法。笔者兴致勃勃地开始想用vuejs写个单页面应用出来。兜兜转转地开始使用vue-router这个插件,阅读了vue-router前两个事例之后,发现了一个问题。
通过webpack导入.vue的组件文件的时候,弹出问题:

[vue warn]: Failed to mount component:template or render function not defined.


这个只问题出现在vue2.0中,搜索了一下相关资料,网友的解答给了笔者一点启发:传送门

@byronlun的回答:
于是乎,按照官方文档的说法,在webpack配置中加入上面那段代码之后,就不报错了,不过我的页面还是一片空白:<
实在没办法继续Google,然后在Github看到了这个issue里面的LinusBorg的评论,在index.js文件这里,只能使用下列两种情况:
使用template属性例如:template:'<div><modal> ... </modal></div>'
使用render() function
因此,通过测试,可以直接使用template:'<div><modal> ... </modal></div>来加载对应的内容,组件的话,则需使用render function来注册子组件。
修改之后的index.js文件应该是这样:

    var Vue = require('vue');
    import App from './vue/app';
    new Vue({
      el: '.show',
      render: (createElement) => createElement(App)
    });

本人愚见(错误请指出):特别注意一点在入口js文件这里,是无法使用components属性来注册子组件的,而在组件中则可以使用components属性来注册子组件。如果在你的App.vue中,使用components属性来注册子组件的话是可以注册成功的。这是vue2.0才会出现的问题,如果是1.0是不会出现这个问题的。

Part 2,解决的方法

网友byronlun的回答,有一定的正确性。在使用webpack构建前端应用时通过
import [component_name] from "\views\component_name.vue"
的方法载入的实例无法直接使用全局变量注册组件Vue.component()
但是使用webpack构建的语法,import方法导入的实例拥有多个方法,列如在vue webpack工程中修改如下代码:

App.vue中

<template>
  <div id="app">
    <router-link to="/"><img src="./assets/logo.png"></router-link>
    <navbar></navbar> <!-- 添加自定义组件-->
    <nav>
      <router-link to="/user/peng/profile">Go to user profile</router-link>
      <router-link to="/user/hu/posts">Go to user posts</router-link>
    </nav>
    <router-view/>
  </div>
</template>

入口main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import navbar from '@/components/Navbar.vue'

Vue.config.productionTip = false

// 以下是注册组件的方法
Vue.component('navbar', {
  render: navbar.render,
  data: navbar.data
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

组件Navbar.vue

<template>
  <div class="test">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'navbar',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Part 3, 组件加载的原理

在查看navbar实例,我们发现render:f()data: f data()两个方法。也就是说,webpack的解析会将.vue文件中的模板和数据编译成为render、data和其他方法。

通过这两个方法,可以对组件进行初始化。所以在入口js文件注册组件时,我添加了两个初始化方法

Vue.component('navbar', {
  render: navbar.render,
  data: navbar.data
})

最后的效果如下,

Part 4, 后续研究

在网上看到,webpack在解析的时候还可以将.vue文件中的css和js模块载入进来,需要配置sass和lass。这方面的研究还没开始。笔者在这里先留个坑!!!

后记,

新年第一周的技术文档以拖延一天的结果展示出来,有些说不过去,这里反省一下。对于这篇文章,希望对新学习vue的网友有所帮助,当然也希望路过这里的技术高人提供宝贵意见。
谢谢大家,祝大家新年快乐!(这个祝福有点晚!!!)

posted @ 2018-01-08 10:41  EasonPeng  阅读(3510)  评论(0编辑  收藏