vue(4)vue的组件方式书写代码

1.我们之前用vue-cli默认配置创建的项目目录如下：

2.现在我们删除掉src中的除了main.js外的所有文件，并且删除掉main.js中的所有代码：

3.这时候我们使用npm run serve可以成功运行项目，只是页面没有内容，因为我们的index.html中没有加入任何可以显示的内容，但是网站是成功运行的。

4.在这里public中的index.html就是项目运行的主页，main.js就是项目的主入口js文件

5.但是在这里需要注意的就是，我们不可以直接在main.js文件中像之前cdn使用vue那节中的那样，直接使用createApp创建一个对象绑定到html中的元素中来操作该元素。原因是在public的文件夹中的文件在打包后是不会做任何处理的，所有即使我们在里面写入了类似{{message}}绑定值得操作是没有任何作用得。

6.这里就需要通过组件得方式来连接：

首先在src下创建文件App.vue，这就相当于创建了一个vue的组件：

<template>//这里面写html代码

    

 <div>//template里面有且只能有一个根html元素

        {{msg}}//显示msg

    </div>

</template>

<script>//这里写js代码

export default {//default表示导出的vue组件没有名字，它的名字根据你引入的时候赋予的名字定义

   name:"App",//组件的名称设置为App

   data:function(){//组件绑定的数据

       return {msg:'this is a test'}

   }

}

</script>

<style scoped>//这里写css代码

</style>

 

然后再main.js中加入代码：

import { createApp } from 'vue'

import App from './App.vue'//引入上面写的vue组件，这里的App可以为任意自己取的名字，因为在App.vue中我们export default，没有为这个组件命名

createApp(App).mount('#app')//将这个组件绑定到index.html中id为app的元素上

7.再次运行项目，就能看到页面显示的绑定的数据：this is a test