搭建一个vue3项目

举报
代码哈士奇 发表于 2021/06/08 11:31:18 2021/06/08
【摘要】 安装最新脚手架文档给出,使用新版脚手架可以搭建vue3.x项目npm install -g @vue/cli目前最新是4.5.9版本使用图形化界面来管理项目在命令行输入启动 vue ui 创建项目让我们来创建一个项目选择多了个版本选择创建完成后 我们从编译器打开它我这里用的室友的电脑,为了方便使用hbuilder x 运行项目终端输入 npm run serve项目就开始运行了 新老版本m...

安装最新脚手架

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

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

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

在命令行输入启动 vue ui

在这里插入图片描述

创建项目

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

图片.png

在这里插入图片描述

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

我这里用的室友的电脑,为了方便使用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>







【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。