1. 在 HTML 文件中引入 Vue.js CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 2.0 Tutorial</title>
<!-- 引入 Vue.js 2.0 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<!-- Vue.js 将会在这个元素中工作 -->
<div id="app">
{{ message }}
</div>
<script>
// 在这里编写你的 Vue.js 代码
</script>
</body>
</html>
2. 创建一个 Vue 实例:
在 <script> 标签中创建一个 Vue 实例,并指定它要管理的 DOM 元素。
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
这个实例将会在具有 id 为 app 的 DOM 元素中工作,并使用一个数据属性 message。
3. 运行本地服务器(可选):
如果你在本地开发中使用 Vue.js,最好在本地运行一个服务器。你可以使用 Python 自带的简单服务器:
在命令行中,进入你的项目目录,然后运行:
python -m SimpleHTTPServer 8000
或者,如果你使用 Python 3:
python -m http.server 8000
访问 [http://localhost:8000](http://localhost:8000) 就可以查看你的页面了。
这只是使用 CDN 引入 Vue.js 的简单方法。在实际项目中,你可能会使用 npm(Node 包管理器)来安装 Vue.js,然后通过构建工具如 webpack 来进行项目开发。这样可以更好地管理依赖项和项目结构。
转载请注明出处:http://www.zyzy.cn/article/detail/4794/Vue