1
vuejs単一ファイルコンポーネントを、既存のコードを既に開発しているコンポーネントの通常のスタイル（それらが呼び出されているかどうか不明）と混在させようとしています。Vuejs単一のファイルコンポーネントと通常のコンポーネントが混在しています
main.js
import Vue from 'vue'
import test from './test.vue'
import VueMaterial from 'vue-material'
Vue.use(VueMaterial)
new Vue({
el: '#app',
render: h => h(test,
{props: {
testprop: 'ttttt'
}
}),
data:{
// /testprop: 'tytytytyty'
}
})
test.vue
<template>
<div>
<my-component></my-component>
<div>This is the first single page component</div>
</div>
</template>
<script>
import MyComponent from '../src/components/MyComponent.js'
import TestTest from '../src/components/TestTest.vue'
export default {
name: 'MainApp',
props: ['testprop'],
components: {
TestTest,
MyComponent
},
mounted: function(){
},
computed:{
returnProp: function(){
return this.testprop
}
}
}
</script>
<style lang="scss" scoped>
.md-menu {
margin: 24px;
}
</style>
MyComponent.js標準スタイルコンポーネント
window.Vue = require('Vue') //would give errors vue undefined if i dont't add this line
Vue.component('my-component', {
name: 'my-component',
template: '<div>Normal component</div>'
})
index.htmlを
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/theme/default.css">
<title>vuematerial</title>
</head>
<body>
<div id="app">
<main-app :testprop="testprop"></main-app>
</div>
<script src="dist/build.js"></script>
</body>
</html>
単一ファイルコンポーネントと子の単一ファイルコンポーネント（ここでは示していない）表示罰金。ノーマルタイプは、
<!--function (t,n,r,i){return Mt(e,t,n,r,i,!0)}-->
で表示されます。
Iv'eもmain.jsファイルでMyComponentのインポートを試みました。 アイデア
私は実際には単一のファイルのものにすべての私の既存のコンポーネントを変換したくない:(
確かに100％ではありませんが、外見上は試してみる価値があります。 'window.Vue = ...'の代わりに 'vue 'からVueをインポートする – webnoob
' vue 'からMyComponent.jsファイルにインポートVueを追加しようとしました。エラーは発生しませんが、まだコンポーネントを<！ - function（t、n、r、i）{return Mt（e、t、n、r、i、！0）} - > – tachi
として生成します。ウィンドウオブジェクトを台無しにするのではなく、それをインポートする正しい方法だからです。 – webnoob