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

环境准备

VSCode开发工具

新建第一个页面

  1. 打开VSCode,点击File -> New File新建了个空白文件,保存为HelloVue.html
  2. 然后在刚才新建的页面,先输入感叹号"!",再按下TAB键,就会自动生成HTML代码
    vue教程1:第一个页面HelloVue快速搭建_第1张图片
  3. 编写HTML代码
<div id="app">
   {
    { message }}
div>
  1. 编写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>
  1. 最终整个HTML代码如下,可以直接整个拷贝测试

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>

运行测试

  1. 安装“open in browser”预览插件,已经安装的可以忽略跳过
    vue教程1:第一个页面HelloVue快速搭建_第2张图片

  2. 右键该HTML文件,点击Open In Default Browser,效果如下:

vue教程1:第一个页面HelloVue快速搭建_第3张图片

你可能感兴趣的:(Vue,vue)