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
} = Vue
createApp({
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
本文含有隐藏内容，请 开通VIP 后查看