1 vue基本介绍
vue.js是一个轻量级的前端界面框架,
2016年10月发布最新的2.0版本,更强大,更快捷。
英文官网:https://vuejs.org/
中文官网:https://cn.vuejs.org/
github地址:https://github.com/vuejs
vuejs官方论坛:https://forum.vuejs.org/
2 实例对象
![7007663-5839a0942158eaad.png](https://i-blog.csdnimg.cn/blog_migrate/f144ec6fcea1968282d8f839c2f7e510.webp?x-image-process=image/format,png)
实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-on:click="handleClick">{{msg}}</div>
</div>
<script >
new Vue({
el:"#root",
data:{
msg:"hello world"
},
methods:{
handleClick:function(){
alert("123"),
this.msg = "world"
}
}
})
</script>
</body>
</html>
3 构建项目
查看相关的工具是否安装:
node -v
npm -v
vue -V
【注意】:vue的参数是-V(大写字母)
![7007663-dd99459c26fb017c.png](https://i-blog.csdnimg.cn/blog_migrate/ac259990ac7d8dec847bb16805c26daf.webp?x-image-process=image/format,png)
构建一个webpack工程:
vue init webpack demo03
填写相关信息即可
![7007663-ac04ca37b37ef17c.png](https://i-blog.csdnimg.cn/blog_migrate/ee7db8447407faccb6ab60cd4ab3b7af.webp?x-image-process=image/format,png)
安装前端路由
npm install vue-rooter --save