我正在使用令人惊叹的 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
最佳答案
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 {}
}
}
关于javascript - Vue.js 和 Webpack 中分离脚本、样式和模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41124718/