Vue CLIのsrcフォルダにあるmain.jsの記述をvs.codeで開いて見てみます。
import App from './App.vue'ってなんでしょう?
上に設置してある「App.vue」のことだそうです。
中身はtemplate,script,styleの3つの要素からできています。
import App from './App.vue'とはApp.vue(単一ファイルコンポーネント)を読み込んで(import)オブジェクトを作っていますということだそうです。
以下は参考オブジェクトの中身です。
Object
beforeCreate: Array(1)
0: ƒ ()
length: 1
__proto__: Array(0)
beforeDestroy: Array(1)
0: ƒ ()
length: 1
__proto__: Array(0)
components:
HelloWorld:
beforeCreate: [ƒ]
beforeDestroy: [ƒ]
name: "HelloWorld"
props: {msg: {…}}
render: ƒ ()
staticRenderFns: (4) [ƒ, ƒ, ƒ, ƒ]
_Ctor: {0: ƒ}
__file: "src/components/HelloWorld.vue"
_compiled: true
_scopeId: "data-v-469af010"
__proto__: Object
__proto__: Object
name: "App"
render: ƒ ()
_withStripped: true
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
length: 0
name: "render"
prototype: {constructor: ƒ}
__proto__: ƒ ()
apply: ƒ apply()
arguments: (...)
bind: ƒ bind()
call: ƒ call()
caller: (...)
constructor: ƒ Function()
length: 0
name: ""
toString: ƒ toString()
Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
get arguments: ƒ ()
set arguments: ƒ ()
get caller: ƒ ()
set caller: ƒ ()
__proto__: Object
[[FunctionLocation]]:
[[Scopes]]: Scopes[0]
[[FunctionLocation]]: App.vue?42e3:1
[[Scopes]]: Scopes[3]
staticRenderFns: Array(0)
length: 0
__proto__: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__: Object
_Ctor:
0: ƒ VueComponent(options)
__proto__: Object
__file: "src/App.vue"
_compiled: true
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()