Vue学习之第一个Vue应用

Morris_

已于 2023-08-19 20:13:34 修改

阅读量1.1k

点赞数

分类专栏： # Vue 文章标签： vue.js javascript

于 2023-06-13 14:31:47 首次发布

本文链接：https://blog.csdn.net/Morris_/article/details/131186571

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一个 Vue 应用

安装WebStorm

在这之前，已下载安装好了WebStorm。

打开WebStorm，点击”+“就可以创建一个新的应用。

项目文件目录地址： /Users/morris/WebstormProjects

或者在 file -> new project 也可以新建一个项目
新建一个 html 文件

file -> new -> HTML File
请添加图片描述
新建 index.html 文件后，自动生成如下代码

在 body 里面添加 hello world，之后将文件拖拽到Chroom浏览器里，页面就显示出来了

请添加图片描述
4. 引入 Vue

使用CND的方式引入Vue.js，bootCDN这个网站，https://www.bootcdn.cn/里，选择Vue
请添加图片描述
到Vue这个库的链接里

选择 min.js 的，点击复制script标签，然后将复制的代码粘贴到 header 中去，如下图

如果是公司内网下使用，可以将js下载下载，引入到项目里面来也可以。

使用Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <style>
        .text {
            color: red;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.9/vue.cjs.prod.js"></script>-->
</head>
<body>
<div class="text" id="app">
    hello world
    {{msg}}
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        }
    })
</script>
</body>
</html>