01. [初识]Vue3教程简介与Hello World编写
在教程开始前,首先强调的是本 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编写