大多数语言最开始都是从简单的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