hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）_webstorm新页面生成vue基础标签-CSDN博客

本文链接：https://blog.csdn.net/hualinux/article/details/115457272

本文档详细介绍了如何在WebStorm中创建一个简单的Vue项目，从下载安装WebStorm，创建空工程，到引入vue.js文件，编写打印'Hello World'的代码，并最终运行展示结果。适合Vue.js初学者参考。

摘要由CSDN通过智能技术生成

这节我使用webStrom创建一个普通的html，并使用js的方式引用vue.js，方便新手学习。

也可以先学习一下vue.js官网导读部分内容

一、webStrom下载及安装

可以去webStrom官网下载，双击安装即可，这里不详细说明了，如果真的是不懂的话，可以找我。

PS：如没注册码可以试用30天，已经够用了，网上也有很多破jie，可以搜索一下。

二、创建一个简单的vue

我的系统是win10，64位，安装好的是webStorm目前最新版本2020.3.3

2.1 创建一个空工程

双击桌面上webStorm图标，打开WebStorm，按如下步骤创建

我这里选择是一个空的工程，并选择好路径，随便起一个名字，比如我的 myvue2tag，最后点“create”创建，即创建成功。

PS：上图中的Vue.js是使用vue cli安装的，后面我才讲。

最终界面如下：因为是空工程，什么都没有。

2.2 使用<script> 标签引入vue

2.2.1 vue.js文件下载

打开vue官网导读的安装，因为我们是开发使用的，所以下载的是开发版本。

我在空的工程目录下创建一个文件夹，叫static/js，

把刚才下载的vue文件拖拽到js文件夹中，并放手

2.2.2 引导vue.js文件

在根目录下创建一个html文件，我这里使用的是html5，名叫index.html

在html中的<head>标签中引入vue.js文件，这些都是js基础知识。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <script src="static/js/vue.js"></script>
</head>
<body>

</body>
</html>

2.3 使用vue.js打印hello

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">hello {{ msg }}</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "vue"
        }
    })
</script>
</body>
</html>