1. 前期准备
- 安装vs code IDE，vs code 安装 插件 open in brower
- 新建 vue-learning 文件夹
- vs code IDE打开文件夹
2. 基本用法
- 创建demo1.html文件,内容如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入 vue 脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><!-- 2. 声明 vue 控制 DOM 区域 --><div id="app">{{ message }}</div><script>// 3. 创建 vue 实例对象const {createApp,ref} = VuecreateApp({setup() {const message = ref('Hello vue!')return {message}}}).mount('#app')</script>
</body></html>
- 右键，在默认浏览器打开，效果如下
参考
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
