0
点赞
收藏
分享

微信扫一扫

(一)NodeJS环境安装、创建第一个Vue应用

古得曼_63b6 2024-11-11 阅读 5

(一)环境安装、创建第一个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中。
      以上都是我个人的理解,官网上给出了很多详细示例。大家可以仔细去阅读官网教程。

举报

相关推荐

0 条评论