vue-npm

启动vue项目，在本地启动一个web服务器，同时把我们的网页放到web服务器上

main.js模块化

早期前端代码：script标签，引入其他文件

现在：通过import方式，导入vue

1，通过vue导入createApp方法

2.导入App.vue

3.调用了createApp方法，把App传入,同时把他mount到了app这个标签上

（app标签）

App.vue

是Vue提供 的一个组件

App.vue是Vue提供 的一个根组件

//组件的标签，文本
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

//组件行为的代码
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

//组件里的css样式
<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>

<img alt="Vue logo" src="./assets/logo.png">（logo）

  <HelloWorld msg="Welcome to Your Vue.js App"/>(下面的文字)

HelloWorld标签，就是自定义的组件，也就是说用了组件化开发，可以自定义标签

位置：

自定义标签

1.导入

import HelloWorld from './components/HelloWorld.vue'

2.注册

  components: {
    HelloWorld

}

导入和注册都在script标签里

这样上面<template>就可以用自定义 的组件了

为什么把组件放到app.vue里面他就可以显示出来

因为他在main.js里导入了app.vue

导入进来把他放到，mount到了id叫app的标签里面去了

最终app.vue里面的内容会被渲染到id叫app的div里面去