How to compile new source code in vuejs boilerplate using webpack

Question

I'd like to ask you something easy which is difficult for me. It's about vuejs compile based on webpack.

I am a newbie in vuejs especially in this boilerplate(https://github.com/chrisvfritz/vue-enterprise-boilerplate). I want to make an app based on this boilerplate.

I installed this boilerplate and then added "vuetify" (responsive GUI plugin) to make an app. With responsive UI it was not easy but finally they are working together.

Image showing vue and vuetify working together

When i added vuetify, helloWorld.vue is also added in ./src/components automatically, but it is not complied (transpiled) so whenever i run "yarn dev" to launch dev server, I see a message like below:

./HelloWorld in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js&

I want to know how I can compile HelloWorld.vue and make it included in output file like app.js. Additionally, moving HelloWordl.vue to ./src was not working as well.

I just want to know small hints for that.

Thanks in advance. June, Chung

Answer 1

I found out the reason.

I added statement like this in app.vue

import HelloWorld from './components/HelloWorld'

it made an error( it must be ./components/HelloWorld.vue )

I thought it is okay when I import the component without its extension.