WebStorm新建vue项目之HelloWorld

您所在的位置：网站首页 › 如何用webstorm写网页 › WebStorm新建vue项目之HelloWorld

WebStorm新建vue项目之HelloWorld

2023-12-20 08:45| 来源: 网络整理| 查看: 265

Vue.js的引入之HelloWorld基本步骤写在前面说明步骤运行结果写在后面

写在前面

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

说明

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

步骤新建一个空项目在这里插入图片描述

在项目上右键新建一个文件夹js 在这里插入图片描述

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

4：将vue.js拷贝到js文件夹下在这里插入图片描述 5.右键项目（untitlend1）新建一个hello.html文件（项目结构）将代码复制到hello.html文件中，即可运行

Title {{msg}} {{1+2}} {{msg + '---' + 123}} /* Vue的基本使用步骤 1、需要提供标签用于填充数据 2、引入vue.js文件 3、可以使用vue的语法做功能了 4、把vue提供的数据填充到标签里面 */ var vm = new Vue({ el: '#app', data:{ msg: 'hello' } }); 运行结果

在这里插入图片描述

写在后面

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

【本文地址】

WebStorm新建vue项目之HelloWorld

WebStorm新建vue项目之HelloWorld

今日新闻

推荐新闻