WebStorm新建vue项目之HelloWorld

Vue.js之HelloWorld基本步骤说明：电脑Windows10系统，用的编程软件是WebStorm ，没有安什么环境，（目前hello world能运行，复杂的还没进行测试）直接上步骤：新建一个空项目在项目上右键新建一个文件夹js在js文件夹下, 新建一个JavaScript 文件命名为vue在这里插入代码片...

与或

2734人浏览 · 2020-03-12 12:44:14

与或 · 2020-03-12 12:44:14 发布

Vue.js的引入之HelloWorld基本步骤

写在前面

第一次写这种教程，搜了一下网上的感觉比较繁琐，需要配环境啥的，这个方法只需引入一个js文件即可。适合刚入手写几个简单的项目用。

说明

电脑Windows10系统，用的编程软件是WebStorm ，没有安什么环境，（目前hello world能运行，复杂的还没进行测试）

步骤

新建一个空项目
在项目上右键新建一个文件夹js

3.点击链接获取: vue.js.
在这里插入图片描述
选择开发版本将vue.js下载到本地。

4：将vue.js拷贝到js文件夹下
在这里插入图片描述
5.右键项目（untitlend1）新建一个hello.html文件（项目结构）

将代码复制到hello.html文件中，即可运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div><!--插值表达式-->
    <div>{{1+2}}</div>
    <div>{{msg + '---' + 123}} </div>
</div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
            Vue的基本使用步骤
            1、需要提供标签用于填充数据
            2、引入vue.js文件
            3、可以使用vue的语法做功能了
            4、把vue提供的数据填充到标签里面
         */
    var vm = new Vue({
        el: '#app',<!--元素的挂载位置-->
        data:{    <!--模型数据-->
            msg: 'hello'
        }
    });
    </script>

</body>
</html>

运行结果

在这里插入图片描述

写在后面

小白一枚，刚接触vue，过程可能写的不是很详细，有什么不足和错误，希望大家能够指出 :-）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^