cdn获取方式

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://unpkg.com/vue@next"></script>

也可以下载文件直接引入： unpkg.com/vue@3.2.27/…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CDN引入</title>
		<!-- 导入Vue3 -->
		<script type="text/javascript" src="./vue.global.js"> </script>
	</head>
	<body>
		<!-- 应用程序挂载 -->
		<div id="app">
			<h1>{{msg}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		/* Vue3 */
		// 1-创建Vue实例对象
		const app=Vue.createApp({
			// data属性节点要采用函数的写法
			dta(){
				return{
					msg:"hell Vue3"
				}
			}
		})
		// 2-挂载应用实例
		console.log(app)
		app.mount("#app")
		
		
		/* Vue2: */
	/* 	new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				
			}
		})
		 */
		
	</script>
	
</html>

vue cli脚手架

安装最新版本vue cli脚手架 npm i @vue/cli -g
创建Vue3项目 vue create projectname

vite构建工具

快速的冷启动、即时的模块热更新、真正的按需编译
vite是Vue官方发布的一款构建工具
vite底层不是基于webpack
vite底层是基于浏览器对ES模块语法的支持来进行项目构建,所有构建速度很快安装
1、创建项目 npm init vite project-name

2、安装项目依赖

npm install //或 npm i

3、项目启动

npm run dev

4、默认监听端口号300

http://localhost:3000

Vue3快速上手

cdn获取方式

vue cli脚手架

vite构建工具