小项目的搭建"/>
在IDEA的第一个Vue小项目的搭建
Node.js的安装
- 直接下载:官网下载
因为我在官网下载时网速特别慢,如果你下载时也慢,可以到我百度网盘下载:
链接:百度网盘
提取码:92ui - 下载后直接进行安装。
- 使用cmd命令窗口,查看是否安装成功
node -v //查看node版本
npm -v //查看npm版本
若出现相应版本号,则表明安装成功
下载Vue.js
直接官网下载:官网下载
IDEA上体验第一个小项目
- File—>New—>Project
- 点击next,并为项目起个名字,在点击Finish
- 新建一个文件夹,并添加 Vue.js
- 新建一个文件夹,并新建一个html文件
5.编写代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hellow Vew</title>
</head>
<div id="app"><!--id为app的div元素--><h2>{{message}}</h2> <!--这个显示过程对于初学者来说比较难理解,我们现在可以不去深究,以后我们会懂的-->
</div>
<body>
<script src="../Js/vue.js"></script> <!--指定Vue.js文件的路径,以便执行时导入vue.js-->
<script>//ler(变量) const(常量)//声明式编程let app=new Vue({ //创建Vue对象,Vue在vue.js中有相应的定义,这里直接用调用就行el:'#app',//el属性决定这个Vue对象挂载到哪个元素上,我们这里是挂载到id为app元素上data:{//data属性会存储一些数据,这些数据可以是我们自己定义的,也可以是从服务器上加载的message:'你好呀,Vue,很高兴见到你,以后请多多关照!'}
})
</script>
</body>
</html>
6.效果图
福利
我这里有一本同学推荐的教材,需要的可以免费下载。
链接:百度网盘
提取码:of8q
如果你觉得这篇博客对你有一点点帮助,那请帮我点赞吧!
下一次,世界精彩处见!
更多推荐
在IDEA的第一个Vue小项目的搭建
发布评论