vue项目的创建:
![](https://i-blog.csdnimg.cn/direct/e46a59c3d923463ebfaad663450afa6c.png)
![](https://i-blog.csdnimg.cn/direct/854eb4a795a9498aa618096cca809319.png)
![](https://i-blog.csdnimg.cn/direct/1fdfdeb728464e31a9c2cd40b34b4e82.png)
![](https://i-blog.csdnimg.cn/direct/31bf3e76d914499e8c044153c65513b8.png)
![](https://i-blog.csdnimg.cn/direct/3df626bd204742d5a950488310b60983.png)
vue项目的启动方式:
![](https://i-blog.csdnimg.cn/direct/2313e6a4ba95418e946b74c59a57761b.png)
vue项目开发流程:
![](https://i-blog.csdnimg.cn/direct/1e4991f34aa045c3b72d8c5019ad9309.png)
![](https://i-blog.csdnimg.cn/direct/09003bea7dbe411b96d4d53de79383b0.png)
代码示例:
<!-- <script>
//写数据
export default{
data(){
return{
msg: '上海'
}
}
}
</script> -->
<script setup>
import {ref} from 'vue';
//调用ref函数,定义响应式数据
const msg=ref('西安')
</script>
<template>
<h1>{{ msg }}</h1>
</template>
<style scoped>
h1{
color:red;
}
</style>