01、Vue3.x初步【搭建页面】

最新推荐文章于 2025-04-27 23:04:14 发布

银色种子

最新推荐文章于 2025-04-27 23:04:14 发布

阅读量508

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vuejs 从入门到应用文章标签： vue3.x vue学习 vue入门到精通 vue全家桶 vue实战基础

本文链接：https://blog.youkuaiyun.com/silvercell/article/details/115862762

Vuejs 从入门到应用专栏收录该内容

6 篇文章

订阅专栏

本文介绍Vue3.x的基础使用方法，并通过Vite快速搭建开发环境，体验其便捷的热更新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`Vue3.x`

介绍： vue是什么的问题，请自行查看官网。本系列重点， vuejs的使用。
文档：使用 vue3.x 英文文档为参考（哈哈哈，因为官网没有中文文档）
目的：为了应用的时候游刃有余，所以要非常清楚vue的用法。

安装`vue`

推荐 vite 的方式 [Vite 是一个 web 开发构建工具]
- 第一个原因：直接装好了vue
- 第二个原因：直接起server, 类似 webpack 热重载，非常方便
安装 vite

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

关于webpack的废话（我为什么不用 webpack 了）

vue3.x 学习。直接不用webpack了，尤同学已经开始和webpack叫板了。个人觉得webpack需要配置加载的太多，
如果说前两年，前端构建打包除了webpack真没什么东西能当全家桶。真是快把 gulp， grunt … 构建工具挤死了… 妥妥的扛把子工具。现在极简配置工具很多。 webpack历史包袱还有配置太多，繁琐搞不好就搞错了。而且开发者近乎一种自嗨模式的开发，更新的真积极。作死的不兼容更新。所以，本教程不用webpack5.0 ，虽然我刚看完webpack5.0 , 当然在我其他文章会教webpack。不过我个人开发的思考还是，工具能做的给工具，我们专注写实现就好了。如果不用工具，那不就是原始社会么。 🆗 废话完毕。进入正题

开始 `Vue 3.x`

刚开始初学 vue 先用小例子，用不到 vite。此处用vite的目的是用它的server-进行热更新。
构建页面结构
- 首先，引入vue框架
- 其次，创建一个页面的容器，#container, 用来当作vue显示的容器
- 在此，写一个挂载点， HelloVueApp 用来挂载数据, 方法…
- 最后，将挂载点，挂载到容器上 Vue.createApp( … ).mount( … )

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	//1
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
	//2
	<div id="container">
	</div>
</body>

<script type="text/javascript">
	//3
	const HelloVueApp = {
	}
	//4
	Vue.createApp(HelloVueApp).mount('#container')
</script>
</html>