在 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 文件，我假设在 Webpack 中使用 alias: { 'vue$': 'vue/dist/vue.common.js' } 对我没有帮助！

我该如何解决这个问题？

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

[Vue 警告]：您正在使用 Vue 的仅运行时构建，其中 模板选项不可用。预编译模板 进入渲染函数，或使用编译器包含的构建。

---

更新

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

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 警告]：渲染根实例时出错

未捕获的类型错误：无法读取未定义的“匹配”属性

Answer 1

Vue-loader 将.vue 文件编译成render functions，如果您不使用它们，那么您将需要使用包含模板编译器的standalone-build。据我所知，这是 runtime 和 standalone 构建之间的唯一区别，所以我认为没有理由将 alias 用于 standalone build 在您的情况下不起作用。

顺便提一下，.vue 文件可以拆分为多个文件。查看this page 上的 src 导入 部分，看看它是否适合您的项目要求

Answer 2

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 {}
   }
}