我们看到官方的示例
<div id="counter"> Counter: {{ counter }} </div>
const Counter = { data() { return { counter: 0 } } } Vue.createApp(Counter).mount('#counter')
那我们在cli工具里如何实现这个例子呢？先在components目录里创建一个组件，组件名称为Counter.vue
然后创建我们的组件
<template> <div id="counter"> Counter: {{ counter }} </div> </template> <script> export default { name: 'Counter', data() { return { counter: 5 } } } </script>
在编程语言中有变量的概念，它可以存放数据，vue中的变量定义是在data(){}方法里定义的，在这里定义的变量，在template里就可以使用{{}}的语法读取
组件定义好了之后需要将自定义的组件注册，先需要导入组件
import Counter from './components/Counter.vue'
然后注册到app里
export default { name: 'App', components: { HelloWorld, Counter } }
在app中以标签的形式使用
<Counter/>
app.vue的完整代码如下
<template> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <Counter/> </template> <script> import HelloWorld from './components/HelloWorld.vue' import Counter from './components/Counter.vue' export default { name: 'App', components: { HelloWorld, Counter } } </script> <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>
那例子里的Vue.createApp(Counter).mount(’#counter’)这句话在哪体现呢？可以查看main.js
import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
其实看vue的时候又让我想到了低码里的结构，也是有app和各种组件，其实大厂的技术也是应用吧，第一作者发明了这些理论啊概念什么的，后人再创建自己的技术的时候往往也是延续了别人好的思路。你保存一下cli会自动给你编译，页面上就显示出来了数字了
总结一下：
本节我们使用cli搭建了我们的第一个例子，使用模板语法输出变量的值，是不是很简单，按照我的思路自己实践一下吧。
