码云学习 Vue3 2021-07-16

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

AI 概述

前置知识下载 VSCode编写第一个 HelloWorld直接引入 Vue3.x 源码在教程开始前，首先强调的是本 Vue3 教程是从零基础开始的，也就是说，你并不需要会 Vue2。前置知识但是你还是需要会下面最基本的知识： HTML: 超文本标记语言，用来写网页的基本结构。 CSS : 层叠样式表，用来让你的页面更加生动和...

文章目录隐藏

前置知识
下载 VSCode
编写第一个 HelloWorld

直接引入 Vue3.x 源码

在教程开始前，首先强调的是本 Vue3 教程是从零基础开始的，也就是说，你并不需要会 Vue2。

前置知识

但是你还是需要会下面最基本的知识：

HTML: 超文本标记语言，用来写网页的基本结构。
CSS : 层叠样式表，用来让你的页面更加生动和好看。
JavaScript : 简称”JS”，解释性或即时编译型的高级编程语言。

只要你会上面这三个知识，我这里说的是会，不用精通，就可以学习这门课程。

下载 VSCode

因为是零基础，所以在编写代码的时候，你需要下载一个编码工具。我工作中一直在使用 VSCode，所以这里也向你推荐用VSCode来进行编码。

VSCode 下载地址：visualstudio

下载时，需要选择你对应的系统版本。下载完成后，进行安装，这里不做过多讲解，如果你实在不会安装，请自行百度搜索相关 VSCode 安装教程。

编写第一个 HelloWorld

安装好 VSCode，我们就可以直接开始编码了。我们通过最简单的例子，先来熟悉一下 Vue3 框架的特性。你可以在任何位置新建一个文件夹，比如我这里在D 盘，新建一个VueTest文件夹，然后把这个文件夹拖动到VSCode当中就可以了，然后在 VSCode 中新建立一个Demo1.html的文件。

打开Demo1.html后，可以直接输入html,然后会出现选项，直接选择html:5,就可以快速生成 html 的基本结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

当然，你也可以直接输入!号，然后回车，也会给我们输出同样的结果。根据自己的喜好，自行选择就好。

直接引入 Vue3.x 源码

Vue 官方提供直接引入的 CDN 服务地址，只要用<script>标签，就可以直接引入Vue3，并且使用它。（其实学习期间，你并不需要会使用 Vue-cli、Vite 这些构建工具，来构建项目）

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

引入 Vue3 的框架之后，我们就可以写 Vue 的代码了。现在<body>标签中，加入一个<div>层，并给他一个id="app"。

<div id="app"></div>

有了这个层，接着在下面写<script>标签和 Vue 的语法，代码如下：

<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>

你这时候可能还看不太懂这段代码，但是你需要跟着我把程序敲出来。为了方便你学习。我在这里给出index.html的全部代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>
</html>

写完代码后，你可以直接打开Demo1.html就会显示在浏览器的网页上。当你看到了结果，我再给你一行行解释一下这个代码。

Vue.createApp({   //创建一个 Vue 实例，简单理解就说，我要使用 Vue 了
    template: '<div>Hello World</div>'   // template 是模板的意思，就是在 JS 里写 html 代码
}).mount("#app")   //这个模板需要放一个位置，也就是说挂载，挂载到`id=app`的 DOM 上

如果能在页面上出现Hello World这文字，本文的练习就算完成了。

以上关于01. [初识]Vue3教程简介与Hello World编写的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 16 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 01. [初识]Vue3教程简介与Hello World编写

码云 SVIP

分享到：

前置知识

下载 VSCode

编写第一个 HelloWorld

直接引入 Vue3.x 源码

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复