新手请看这里
如果你是第一次接触,并且想学习vue,建议你使用以下的方式来引入vue。
在你熟悉的目录下创建一个html文件,将以下的代码复制到head标签中即可
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
现在我们来在浏览器页面中输入hello vue
代码实现
<!DOCTYPE html>
<html>
<head>
<title>vue学习</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}} welcome to myworld!</span>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>
好了,到这里我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。
使用脚手架请看这里
如果需要搭建vue环境的话,必须要基于nodejs,所以我们首先要在电脑上安装nodejs。
1.nodejs的安装比较简单
从官网下载node node下载地址
下载后基本上就是下一步下一步,知道安装成功(需要注意的一点是需要勾选add to path,不然在cmd输入node会提示不是内部命令)
2.安装vue的脚手架工具 官方命令行工具
npm install --global vue-cli
3.创建项目 必须cd到对应的一个项目里面
<!--vue-demo01是项目名称,自定义-->
vue init webpack vue-demo01
<!--进入创建好的项目中-->
cd vue-demo01
<!-- 如果创建项目的时候没有报错,这一步可以省略。如果报错了 cd到项目里面运行 -->
npm install
<!--运行项目-->
npm run dev
最终效果如下