环境准备

VSCode开发工具

新建第一个页面

打开VSCode，点击File -> New File新建了个空白文件，保存为HelloVue.html
然后在刚才新建的页面，先输入感叹号"!"，再按下TAB键，就会自动生成HTML代码
编写HTML代码

<div id="app">{{ message }}
</div>

编写JS代码

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el: "#app",data:{message:"Hello Vue"}});
</script>

最终整个HTML代码如下，可以直接整个拷贝测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{ message }}</div>
</body><!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el: "#app",data:{message:"Hello Vue"}});
</script></html>

运行测试

安装“open in browser”预览插件，已经安装的可以忽略跳过
右键该HTML文件，点击Open In Default Browser，效果如下：

vue教程1：第一个页面HelloVue快速搭建相关推荐

HT合泰单片机入门教程（第一章 HT单片机环境搭建）
目录系列文章目录前言一.合泰单片机的优势二.IDE安装 1.HT-IDE3000下载 2.HT-IDE3000安装三.烧录软件安装 1.HOPE3000下载 2.HOPE3000安装总结 ...
python基础开发环境_Python基础教程，第一讲，开发环境搭建
今天是写Python基础教程的第一课,也是下定决心做技术分享的第一篇文章.先扯几句和技术无关的吧,也便于大家了解这套课程的内容,适不适合自己学习,我做开发6年了,已年过30,一直从事的WEB方面的开发 ...
最详细的个人博客教程搭建教程，最快5分钟快速搭建简约风格博客
文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「后端技术学堂」第一时间阅读(一般比博客早更新一到两篇) 傻瓜式一站式教你用github pages 来搭建博客,详细记录全过程 ...
vue垂死挣扎系列（一）——vue-cli快速搭建
项目安装(windows10安装环境+vue-cli 2.x) 安装node 在官网上下载稳定版本的node node.js官网一路傻瓜安装测试是否安装成功 cmd中node --version ...
基于SpringBoot和Vue实现的个人博客网站快速搭建(已开源)
Hello,你好呀,我是小炜,一个对生活追求诗意的程序猿. 上图是什么鬼?这个嘛,饿,总之Slcp v1.0 发布啦!!!
视频教程-微信小程序开发教程（第一阶段、页面设计）（维吾尔语）-HTML5/CSS
微信小程序开发教程(第一阶段.页面设计)(维吾尔语) 毕业于北京邮电大学计算机专业.拥有将近10年的开发经验.精通java.php.python.c/c++.微信开发等等技术! 艾孜麦提阿布都热合曼 ...
《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
目录: 一.前言二.Vue是什么? 1.简介 2.发展史 3.为什么要学习Vue? 4.jQuery.javascript.Vue的区别 5.Vue框架构造三.Vue的使用 1.Vue环境搭建 2 ...
Vue教程第一篇基础
从接触学习到项目应用,大大小小的vue项目也做了好几个,近期应公司要求需要培训下vue,于是便开始写vue教程的连载博客,网上有很多关于vue学习的教程,我在这里也只是记录下整个vue的学习心得和比较 ...
MVC教程第二篇：第一个页面
MVC教程第二篇:第一个页面摘要本文首先一步一步完成Demo的第一个页面--首页.然后根据实现过程,说明一下其中用到的与ASP.NET MVC相关的概念与原理. 让第一个页面跑起来现在, ...

vue教程1：第一个页面HelloVue快速搭建

环境准备

新建第一个页面

运行测试

vue教程1：第一个页面HelloVue快速搭建相关推荐

最新文章

热门文章