今天我们来分析vue原理 import App from './App.vue'
这个比较好理解,从'./App.vue'中 import App
我们来看下 ./App.vue
./App.vue 分为三个部分
<template></template>
<script></script>
<style></style>
1 template 部分
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
divdiv给了个id 为app,里面包了2个元素
里面有一个img图片,alt属性 和 src属性
1个HelloWorld组件 组件是什么后面再将,先当作一个单标签 组件配了个msg属性
2. script 部分
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
import HelloWorld from './components/HelloWorld.vue'
导入了HelloWorld组件
name: 'App'
配置name 'App'
components: {
HelloWorld
}
components 这里是注册组件,组件注册了才能在template中使用
3. style
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
组件的分析,我们后面细讲,这里先了解下。
在main.js 中导入了App.vue这个组件