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

╰半橙微兮° 2023-10-06 20:19 23阅读 0赞

#### 阅读目录 ####

*  前置知识
 *  下载VSCode
 *  编写第一个HelloWorld
 *  直接引入Vue3.x源码

## 前置知识 ##

--------------------

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

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

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

## 下载VSCode ##

--------------------

因为是零基础，所以在编写代码的时候，你需要下载一个编码工具。我工作中一直在使用VSCode，所以这里也向你推荐用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的语法，代码如下：

你这时候可能还看不太懂这段代码，但是你需要跟着我把程序敲出来。为了方便你学习。我在这里给出`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实例，简单理解就说，我要使用Vue了
    Vue.createApp({
        
    	template是模板的意思，就是在JS里写html代码
        template: '<div>Hello World</div>'
    }).mount("#app")  这个模板需要放一个位置，也就是说挂载，挂载到`id=app`的DOM上

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