一、软件的安装
首先，安装vscode,这个安装好像没有什么需要注意的点，如果不放心的话就网上找个博客，跟着步骤安装即可。
安装完成之后，在组件（下图）中安装相应的插件。首先建议英文和我一样不好的，安装一个汉化插件。
搜索chinese,下载第一个即可：
然后我们要写的是vue，所以需要下载相关的插件，如下图：
导入vue.js:
然后尝试跑通一个代码，这个代码就以官网中的内容进行尝试：
再下载Live Server（为了能够直接在浏览器中查看到修改的结果）：
然后就可以开始学习相应的语法了。
二、使用软件运行一个简单的代码
首先，打开vscode,然后新建一个超文本标记语言文件，即后缀名为.html或者.htm都为html格式的文件。例如：demo.html。
新建之后输入一个英文输入法的感叹号（!）然后回车就可以可以自动生成一个框架，我们后续的代码在这个基础上添加即可。
我们要使用vue可以通过 CDN 使用 Vue，在引用的时候将下面这个路径引用到代码中，就可以使用vue了。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>但是对于这个方法，每次使用的时候都需要联网访问，所以还有一种方法就是将这里面的内容复制到一个新的.js文件中， 例如，我新建的是vue.js：
这里面的内容可以自己去上面那个网站去复制，如果不想去的话就每次联网操作吧。因为里面的内容太多了，无法一次性复制到这里。
unpkg.com/vue@3.4.31/dist/vue.global.js
在引用的时候，就直接写：
配置好这个之后，就写一个简单的代码，让程序可以跑起来。
参考这个快速上手的代码就可以：
快速上手 | Vue.js (vuejs.org)
参考代码：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
//上面的这个引用了vue.js就不用写这个了。
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>在运行的时候右击，然后选择下图中的那个操作就可以在浏览器上显示内容，通过刷新还可以实时更新内容。
最终结果：
测试是否能直接修改现实的内容，例如将内容修改为”Hello 北京！“，然后刷新浏览器页面，可以看到也跟着改变了。
三、基础学习
简介 | Vue.js (vuejs.org)
事件绑 定
v-on:click="handler" 或 @click="handler"
其中，v-on表操作，click是事件名称
双向绑定
v-model
四、易错点
新建html中使用vue需要注意的点：
1、首先，需要借助 script 标签直接通过 CDN 来使用 Vue：
-
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>但是，使用这个方法的话，就需要每次都连接网络再使用，所以，还有另一种不需要联网的方式，就是新建一个.js文件，将这个网站中的内容全部复制进去，然后在引用的时候直接引用该文件即可。
-
-
<script src="vue.js"></script>2、不要出现类型对应错误，比如名字name，如果不写单引号，就会出错，导致其他正常的内容也无法显示。
-
3、里面写的符号都是英文状态下的，如果用中文状态下的符号也会出错。
-
4、要将编辑的内容当到app中，如果放在外面也不能正常显示
