hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）

原创

hualinux 2022-09-07 14:10:04 ©著作权

文章标签 hualinux hualinux vue 使用webStrom创建vue vue html 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者hualinux的原创作品，请联系作者获取转载授权，否则将追究法律责任

这节我使用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官网导读的安装，因为我们是开发使用的，所以下载的是开发版本。

hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）_使用webStrom创建vue_04

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

hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）_vue_05

hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）_html_06

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

hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）_hualinux vue_07

2.2.2 引导vue.js文件

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

hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）_html_08

hualinux 进阶 vue 1.2：使用webStrom创建vue例子（标签引入）_hualinux_09

在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>