VUE3快速入门(一)---创建项目

VUE3安装最新脚手架创建项目运行项目新老版本main.js对比vue2.x版本vue3.x版本如果使用HTML安装最新脚手架文档给出，使用新版脚手架可以搭建vue3.x项目npm install -g @vue/cli目前最新是4.5.9版本使用图形化界面来管理项目在命令行输入启动 vue ui创建项目让我们来创建一个项目选择多了个版本选择创建完成后我们从编译器打开它我这里用的室友的电脑，为了

代码哈士奇

8890人浏览 · 2020-12-01 13:36:52

代码哈士奇 · 2020-12-01 13:36:52 发布

VUE3

安装最新脚手架
创建项目
运行项目
新老版本main.js对比
- vue2.x版本
- vue3.x版本
如果使用HTML

安装最新脚手架

文档给出，使用新版脚手架可以搭建vue3.x项目

npm install -g @vue/cli
目前最新是4.5.9版本

使用图形化界面来管理项目

在命令行输入启动 vue ui

在这里插入图片描述

创建项目

让我们来创建一个项目
选择多了个版本选择

在这里插入图片描述

创建完成后我们从编译器打开它

我这里用的室友的电脑，为了方便使用hbuilder x

运行项目

终端输入 npm run serve
项目就开始运行了
在这里插入图片描述

新老版本main.js对比

vue2.x版本

在这里插入图片描述

vue3.x版本

在这里插入图片描述

新版本中创建app挂载
支持.use(store).use(router)格式的写法
我们这样写效果也一样
在这里插入图片描述

如果使用HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<div>hello</div>
		</div>
		<script>
			const app = Vue.createApp({})
			app.mount("#app")
		</script>
	</body>
</html>

大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。

未经本人允许，禁止转载

在这里插入图片描述

后续会推出

前端：vue入门 vue开发小程序等
后端： java入门 springboot入门等
服务器：mysql入门服务器简单指令云服务器运行项目
python：推荐不温卜火一定要看哦
一些插件的使用等

大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
在这里插入图片描述

有问题可以下方留言，看到了会回复哦

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^