代码拉取完成，页面将自动刷新
教程地址：https://www.bilibili.com/video/BV1QA4y1d7xf
Vue3官网地址：https://cn.vuejs.org/
在命令行中运行下面的指令
npm init vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
若不想经过构建流程就可以使用 Vue，请直接复制下面的代码到一个 HTML 文件中，并在浏览器中打开它：
<script src="https://unpkg.com/vue@3"></script>
1.首先打开VScode 2.然后新建HTML文件
这里快速使用VScode的模板创建初始的HTML文件
打一个感叹号,再按 TAB 键，就会自动补全
! + TAB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="counter">
<p>{{num}}</p>
<p>{{uname}}</p>
</div>
<script>
const Counter = {
data:function(){
return{
num:0,
uname:"张三"
}
}
}
Vue.createApp(Counter).mount('#counter')//mount进行挂载，id选择器
//数据双向绑定
//使用npm需要先安装node.js
</script>
</body>
</html>
打开VScode的终端，输入以下代码
npm init vite@latest <项目名称> -- --template vue
可以在当前目录下创建一个<项目名称>的文件夹，并且会获得以下的命令使用
Vite不同于webpack，需要自己安装npm
cd vue-config //进入文件夹
npm install //npm安装
npm run dev //运行项目
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
