javascript - Vue.js 和 Webpack 中分离脚本、样式和模板

Question

我正在使用令人惊叹的 Vue 和 Webpack 创建一个大型应用程序。我不想有 .vue 文件，因为我想将它们分成类似 comp.js 的文件。 , comp.pug和comp.styl

我的comp.js将是:

export default {
    template: require('./comp.pug'),
    data: () => {
        return {
            compStyle: require('./comp.styl');
            message: 'Hello World!'
        }
    // ...
    },
}

我的com.pug将是:

div#comp(v-bind:style="compStyle")
    h1.heading {{ message }}

最后是我的 comp.styl将是:

.heading
    color: #6E6E6E;
    background-color: #E6E6E6
    text-align: center

乍一看，一切似乎都很好，直到我尝试使用 VueRouter，当然还有像 <router-link /> 这样的元素。或<router-view /> !

由于我没有任何 .vue 文件，我假设有 alias: { 'vue$': 'vue/dist/vue.common.js' } Webpack 不会帮助我!

如何解决这个问题？

顺便说一句，我在控制台中收到的错误是:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

<小时/>

更新

值得一提的是，我有两个入口文件:整个应用程序一个

import MainComp from './comp/main';

Vue.use(VueRouter);

new Vue(MainComp).$mount('#app');

还有一个组件(子组件如上):

import Router from './route';
import SubComp1 from './sub1.comp'
import SubComp2 from './sub2.comp'

export default {
  template: require('./main.pug'),
  router: Router,
  components: {
    SubComp1,
    SubComp2
  }
}

我的main.pug :

div
    | here goes the views
    router-view

这是我的route.js :

export const Router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/three', component: SubComp3 },
    { path: '/Four', component: SubComp4 },
    { path: '/', redirect: '/' }
  ]
})

所以当我有alias: { 'vue$': 'vue/dist/vue.common.js' }时添加到我的 webpack 中，错误将是其他内容:

[Vue warn]: Error when rendering root instance

Uncaught TypeError: Cannot read property 'matched' of undefined

Answer 1

component.vue(带有 vue-loader):

<style src='./style.styl'></style>
<template src='./template.pug'></template>

确保 *.styl、*.pug 的加载程序存在。

更新:我忘了，你可以这样做(没有 vue-loader):组件.js

import './style.styl'
import tmpl from './template.pug' // may be it will work

// if import doesn't work, then do it with string variable in this file or import
const tmpl = `
   h1 Hello world
`

export default {
   template: tmpl,
   data() {
      return {}
   }
}