Vue新手入门必读:Hello World(推荐收藏)

Ven%

已于 2024-08-26 15:30:48 修改

阅读量144

点赞数 7

文章标签： vue.js 前端框架前端 node.js npm

于 2024-08-26 14:50:55 首次发布

本文链接：https://blog.csdn.net/weixin_51455837/article/details/141563102

版权

大多数语言最开始都是从简单的hello world入门,翻阅了很多网上教材,都没有找到vue的hello world,小白很难有想学vue的信心,因此决定写一篇所有小白都能一下子入门的教程

vue环境搭建

可根据前端环境搭建
若已搭建，跳过此步

写代码

打开vscode,新建html文件(文件名自定义，例如:demo.html),复制下面代码到文件中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"     content="width=device-width, initial-scale=1.0">  
  <title>Vue Hello World</title>
  <!-- 引入 Vue.js -->  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
  </script> 
</head>
<body>  
  <div id="app">   
  <h1>{{ message }}</h1> 
  </div>  
  <script>   
    // 创建 Vue 实例    
   var app= new Vue({     
     el: '#app', // 挂载点     
     data: { 
           //可修改，修改完后ctrl+s保存文件，并刷新页面，就能生效
           message: 'Hello World!' 
           }
    })         
   </script>
</body>
</html>

message里的内容可自定义，修改完后ctrl+s保存文件，并刷新页面，就能生效了

启动项目

在vscode 的命令行窗口下输入(在最上面的选项中选择Terminal-new Terminal)

安装静态服务器anywhere
npm install anywhere --globle
启动anywhere
anywhere

点击路径 https://172.17.0.1:8000/demo.html

Ven%

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue新手入门必读:Hello World(推荐收藏)

大多数语言最开始都是从简单的hello world入门,翻阅了很多网上教材,都没有找到vue的hello world,小白很难有想学vue的信心,因此决定写一篇所有小白都能一下子入门的教程。
复制链接

扫一扫