Vue3框架入门学习（一）Vue版HelloWorld

最新推荐文章于 2025-09-25 22:10:01 发布

原创

最新推荐文章于 2025-09-25 22:10:01 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

本文是Vue3框架的入门学习，作者在WebStorm2021中创建项目，引入vue.esm-browser-3.1.5.js，并尝试编写简单的Vue程序。在遇到浏览器不支持export语法和Vue未定义的错误后，通过注释和引入vue.global.js解决了问题，最终成功运行无误。

Vue这个框架发展也有很长时间了，之前在网上也看过一些资料，但是没有实际地去学习过，这次打算花点时间开始学习一下这个框架。不看不知道，进到Vue官网一看，最新版本已经到了3.1.5了。说实话连Vue2都没有实际应用过，这就跳到从Vue3开始入门了。

话不多说，任何语言入门都从牛逼的HelloWorld开始。

正好我昨天下载了WebStorm2021版，有了利器就开始干吧。首先我做了一些准备工作，从Vue官网下载了vue.esm-browser-3.1.5.js，因为我是在浏览器环境里来运行Vue程序。

在WebStorm里建一个项目，把vue.esm-browser-3.1.5.js引入进去，这样在写Vue脚本时就有了语法提示，方便多了。看下我的Vue项目结构

新建一个html页面，为了方便测试，我把html、css、js写到一起了，页面代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Vue Hello World</title>
  <style type="text/css">
    .demo {
      font-family: sans-serif;
      border: 1px solid #eee;
      border-radius

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

80大叔学前端

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue03-HelloWord

qq_31532983的博客

06-05

908

创建Vue实例，Vue实例和HTML容器的一一对应，JS表达式 VS JS代码

Vue新手入门必读:Hello World(推荐收藏)

Ven%的博客

08-26

1132

大多数语言最开始都是从简单的hello world入门,翻阅了很多网上教材,都没有找到vue的hello world,小白很难有想学vue的信心,因此决定写一篇所有小白都能一下子入门的教程。

参与评论您还未登录，请先登录后发表或查看评论

vue3之hello world

weixin_68376171的博客

01-20

1870

App.vue文件：看上去就是把html、css、javascript前端的这三个部分放在一起用一个vue组件文件实现前端。tsconfig.json中"extends": "@vue/tsconfig/tsconfig.web.json"标红。运行后它会根据env.d.ts文件去安装相关模块依赖，生成node_modules文件。main.js：程序入口文件，整个程序中最先执行的文件。在 main.ts 中，我们需要先引入相关的模块。相关的依赖，运行下面命令安装。APP.vue：唯一的根组件。

Vue3框架基本介绍及搭建

最新发布

hhyyzz4121的博客

09-25

1347

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)

Vue 3 基础：“Hello World“

学习笔记

11-22

882

https://v3.vuejs.org/guide/introduction.html#what-is-vue-js 例子实际比 “Hello World” 复杂一些，写法同 Vue 3 网页介绍一致： index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d

vue框架下的Hello world编写

DoraemonHui的博客

01-31

387

template> div id = "firstcomponent"> h1> Hello world! h1> p> Writen by {{Author}} p> div> template> script> export default { name: "firstco

1 [初识]Vue3教程简介与Hello World编写

wgchen

11-23

1304

[初识]Vue3教程简介与Hello World编写前置知识下载VSCode编写第一个HelloWorld直接引入Vue3.x源码前置知识但是你还是需要会下面最基本的知识： 1、HTML: 超文本标记语言，用来写网页的基本结构。 2、CSS : 层叠样式表，用来让你的页面更加生动和好看。 3、JavaScript : 简称”JS”，解释性或即时编译型的高级编程语言。只要你会上面这三个知识，我这里说的是会，不用精通，就可以学习这门课程。下载VSCode 因为是零基础，所以在编写代码的时候，你需要下

精选资源

Vue预习课2：Hello World 第一个程序

05-08

学习Vue.js的过程中，除了“Hello World”之外，还需要深入理解组件系统、路由管理（Vue Router）、状态管理（Vuex）以及生命周期等高级特性。掌握这些知识将帮助你构建复杂的单页应用（SPA）和大型Web项目。作为Web...

Vue.js学习笔记之 helloworld

10-21

标题中提到的“Vue.js学习笔记之helloworld”表示这是一篇关于如何快速入门Vue.js的教程，通过创建一个简单的“Hello World!”程序来展示Vue.js的基本用法。描述中提到Vue.js具有轻量、高性能和可组件化的特点，同时...

前端主流框架vue学习笔记第一篇

12-10

【Vue.js 入门 - Hello World】 Vue.js 的第一个示例通常是从"Hello World"开始的。在HTML文件中，我们需要引入Vue.js库，这里通过CDN链接引入。创建`index.html`文件，然后在`<head>`标签内引入Vue.js的CDN链接。...

Vue3教程 - 3 HelloWorld

山石岐渡的博客

10-11

1090

在 Vue2 中，我们主要使用 vue-cli 来构建我们的前端项目，在 Vue3 中，我们将使用 Vite 来构建项目，它由Vue.js的作者尤雨溪开发。在开发 Vue 项目的时候，Vite 可以帮助我们创建项目，并对项目进行编译，提供开发服务器的支持，在本地启动前端服务，使用浏览器进行访问；在将项目打包部署到生产环境中，Vite 使用 Rollup 进行打包和优化，生成高效的静态资源，减少打包体积，并支持代码分割，按需加载模块，提高加载速度。在上面的代码中，使用。下面来正式进入 Vue3 的学习。

Vue3版本HelloWorld

08-02

Vue3版本HelloWorld，可在本地浏览器运行测试学习。

Vue3.0学习（1）- Hello World

雨Winning

07-24

1394

一、下载开发工具直接官网下载VSCode 二、写demo 1、创建文件夹 VSCode不能直接创建项目文件夹，先创建一个文件夹，然后通过VSCode打开。 2、 Hello world 2.1引入vue.js 采用vue+html 模式，在html文件中通过标签script 引入vue.js的标签。 2.2 直接输出文字 css、js、wxss 都在一个 html中，直接在body中输出 hello world。 2.3 通过script输出文字 body中的数据从script中获取。分为以下关键几

Vue3的HelloWorld

m0_64989194的博客

08-30

306

开发工具vscode vite工具创建项目启动项目,停止项目。选择你要创建的项目使用的技术框架使用上下箭头选择。到这里我们的基本项目就创建好了,下面是我的目录展示。在这里我们使用的是第二个JavaScript。npm install命令安装基础依赖(然后运行npm run dev。我的是helloworld)选择好回车确认进入下一步。显示输入你的项目名称。

【Web】使用Vue3开发鸿蒙的HelloWorld！

沙师弟专栏

05-10

2575

本文介绍了如何利用Vue3与HarmonyOS ArkUI框架进行鸿蒙原生应用开发。通过Vue3的响应式编程范式和ArkUI的声明式UI语法，开发者可以快速构建高性能的跨端应用。文章详细描述了从环境搭建到应用落地的全流程，包括开发环境的配置、Vue项目的创建与修改、静态资源的生成与导入，以及如何在DevEco Studio中进行应用签名和运行。最终，开发者可以将Vue3项目成功移植到华为Mate 60 Pro上，实现“一次开发，多端部署”的目标。

Vue3 _ 1. 认识 Vue & HelloWorld 的实现

胖子胖子大胖子的博客

05-06

747

一、Vue 百度百科走一波 Vue 是一个非常强大的框架，Vue 的核心库只关注视图层，非常容易上手，而且还有很多的第三方库的支持，可以说是一个非常强大的框架。它和 React、Angular 被比喻为前端三大框架！（三个可以都学，也可以先学习一个） Vue 的目标是：通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js

vue3第二篇本地引入vue之HelloWorld

等风来的博客

08-03

633

学习目标： 1、通过本地引入vue.js 2、通过vue输出HelloWorld 学习内容：步骤1：新建HTML文件并引入vue 新建一个空的js文件，然后在浏览器中输入https://unpkg.com/vue@next 复制显示的代码粘贴到刚刚建的js文件中。在新建的html文件中引入刚刚的js文件 <script src="../js/vue.js"></script> 步骤2：输出HelloWorld <script> const jpxsr =

Vue3 _ 14. Vue CLI HelloWorld 项目讲解

胖子胖子大胖子的博客

07-13

570

一、项目结构将我们之前创建的 helloworld 项目使用 WebStorm 打开。 node_modules 这里存放的是安装 node 后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。 public 这里存放的一个 ico 图标，还有一个 index.html 文件，这个文件是核心，是必须要有的，因为我们需要有页面进行挂载。 src/assets 这里

Vue第3话 HelloWorld

逆流者的博客

04-15

542

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-helloword</title> </head> <body> <div id="app"> <input ty...

Vue框架学习笔记：从Hello World到TodoList

"这篇学习笔记主要介绍了前端主流框架Vue.js的基础知识，包括如何创建第一个Vue应用（Hello World）以及通过Todo List的例子展示了Vue的数据绑定和基本操作。作者指出Vue吸收了其他框架如Knockout、Angular、React和...