やっていること
Webpack + Chrome-Extensionsで現在、アプリを開発しています。
うまくいかないこと
index.htmlに用意した
html
1<body> 2 <div id="app"> 3 <router-view></router-view> 4 </div> 5 <script src="./../scripts/mypage.bundle.js"></script> 6</body>
上記のdiv(#app)にmain.jsでマウントをしても、マウントされず、
ブラウザ上で
<body> <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--> <script src="./../scripts/mypage.bundle.js"></script> </body>
とのみ表示されてしまいます。
ファイル
mypage.js
javascript
1import Vue from 'vue'; 2import VueRouter from 'vue-router'; 3import './../../node_modules/bulma/css/bulma.css'; 4import Buefy from 'buefy'; 5import 'buefy/lib/buefy.css'; 6import routes from './routes.js'; 7 8Vue.use(VueRouter); 9Vue.use(Buefy); 10 11const router = new VueRouter({ 12 routes: routes 13}) 14 15let app = new Vue({ 16 router 17}).$mount('#app');
routes.js
javascript
1import HomePage from './../components/HomePage.vue'; 2import AtCoderPage from './../components/AtCoderPage.vue'; 3import CodeforcesPage from './../components/CodeforcesPage.vue'; 4import CSAPage from './../components/CSAPage.vue'; 5import AOJPage from './../components/AOJPage.vue'; 6 7export default [ 8 { 9 path: '/', 10 component: HomePage 11 }, 12 { 13 path: '/AtCoder', 14 component: AtCoderPage 15 }, 16 { 17 path: '/Codeforces', 18 component: CodeforcesPage 19 }, 20 { 21 path: '/CSA', 22 component: CSAPage 23 }, 24 { 25 path: '/AOJ', 26 component: AOJPage 27 }, 28]; 29
HomePage.vue
<template> <div> <div> <p> ホームページ </p> </div> </div> </template> <script> export default { data() { return {} } } </script> <style scoped> </style>
うまくいっていた時
Vue-Routerを取り入れる前のApp.vueのみを使用している時は以下のようにすることでマウントする事ができ、画面表示できていました。
mypage.js
mypage.js
1import Vue from 'vue'; 2import Router from 'vue-router'; 3import './../../node_modules/bulma/css/bulma.css'; 4import Buefy from 'buefy'; 5import 'buefy/lib/buefy.css'; 6 7import App from './../components/app.vue'; 8 9Vue.use(Buefy); 10 11let app = new Vue(App).$mount('#app'); 12
app.vue
<template> <div> <MyHeader></MyHeader> <button @click="onclick" class="button is-primary"> click </button> <Hello></Hello> </div> </template> <script> import Hello from './Hello.vue'; import MyHeader from './MyHeader.vue'; export default { data: function () { return { text: "" } }, methods: { onclick: function () { console.log("おしたおl!!"); } }, components: { MyHeader, Hello } } </script> <style scoped> </style> No newline at end of file
インターネットで調べても、マウントできていない記事を見つけることができませんでした。
どうかよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/27 00:14
2018/08/27 03:32
2018/08/27 07:55
2018/08/27 11:04
2018/09/01 02:00 編集