当前位置：首页 > article >正文

（一）NodeJS环境安装、创建第一个Vue应用

article 2024/11/8 19:42:39

（一）环境安装、创建第一个Vue应用

Vue官网
Windows上安装Node.js
安装Node.js
开发工具使用选择
- VS
- WebStorm 2021.3
创建第一个Vue应用（通过 CDN 使用 Vue）
- 通过脚本引入：
- 如何使用呢？
- 页面效果

Vue官网

Vue官网，详细的介绍请移步官网查看。文章更多是让人快速上手并使用。

Windows上安装Node.js

官网上明确提出快速上手Vue3的2个前提条件

熟悉命令行
已安装 18.3 或更高版本的 Node.js

安装Node.js

   官网：Node.js官网
   安装方式：安装教程
   对于具体的安装环境配置我这里就不在CSDN中重复写一些文章了，大家可以参考：NodeJS安装教程

开发工具使用选择

我使用的是WebStorm 2021.3，这里大家根据自己喜好，选择自己喜欢的开发工具即可。我主要是从事后端开发，WebStorm的快捷键以及布局和IDEA差不多，所以我选用了WebStorm。

VS

如果采用VS建议安装以下插件：Auto Close Tag、Auto Rename Tag、Live Server

WebStorm 2021.3

采用这个软件的话，这里就不过多描述了。大家可自行网上找工具。

创建第一个Vue应用（通过 CDN 使用 Vue）

按照官网给的资料顺序，应该是通过npm去安装第一个Vue应用，我也是跟着那个教程来的，我发现不太友好，所以我这里通过CDN方式开启我们第一个应用。

通过脚本引入：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

如何使用呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDN方式引入</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    Hello world！！<br>
    <div id="context">
        Message:{{message}}
    </div>

    <script>
        const context = {
            data() {
                return {
                    message: 'Hello world!!'
                }
            }
        }
        Vue.createApp(context).mount('#context')
    </script>
</body>
</html>

页面效果

个人理解：现在页面上创建了一个id为context 的div 。内容是Message：{{message}} 。在下面一个脚本中，我们想当定义了一个message 的变量并赋值。Vue.createApp这里开始就是创建并告知数据来源是上方定义的const context这里，并渲染到id为context中。
以上都是我个人的理解，官网上给出了很多详细示例。大家可以仔细去阅读官网教程。

查看全文

http://www.kler.cn/a/384809.html