vue--轻量级js框架，对于做h5的同学来说已经很火了，学习成本低，相信网上有好多文章或者博客来描述使用方式和技巧，在这主要介绍从小白入手到精通的实战过程。对于一个做Java开发的程序媛，大部分java web都是用tomcat容器启动，那样前端有什么变动想要生效必须restart resource一下，太影响开发了，那么我们用vue框架，npm启动前端，只要保存就会生效，这样开发效率会大大提高。我学习任何东西的过程基本是基础大概过一遍，然后上手实战，在实战过程中体会各种坑，填坑的过程就是不断学习的过程，哈哈，那就开始吧！
1、搭建环境
我的环境：win7 64bit 开发工具：idea16
（1）安装node.js
https://nodejs.org/zh-cn/download/ 默认安装C:\Program Files\nodejs因为安装时已经自动配置了环境变量，所以我们cmd输入node,即可进入node.js交互模式
图1 检验node安装
（2）安装npm
找到自己项目的目录打开git bash：npm install（安装比较慢），然后编译，可以设置本地开发环境dev和生产上线环境build，那么我们本地编译就是：npm run dev
图2 npm编译启动
2、搭建项目
环境搭建完了，那看下项目结构吧。。。。。
图3 项目结构
（1） vue是单页面应用，当npm run dev后出现的就是该应用的index.html，其他的页面都是该页面路由过去的，下面是npm编译环境需要的配置。
图4 vue编译环境
（2）app.vue，是总组件，main.js中import app from '.app'，页面显示app.vue中的内容。
（3）下面是要开始写页面代码了，主要在src中的view里面
图5 src代码结构
（3）页面编码
vue的页面有自己的生命周期
图6 vue生命周期
首先created，mounted是在页面初始化的时候调用的，根据踩坑经验来说，调接口异步返回数据填充页面，最好将接口调用放到mounted里面；updated是页面初始化完后，页面数据有修改时都会调用，可以在此周期中加些判断条件以达到页面需要校验的效果；beforeDestroy是页面元素销毁，可以将不需要缓存的元素放在里面。
watch：是作为页面绑定元素的监听事件，实时监听，作为校验。
computed：vue中实时计算, 检测到数据发生变动时就会执行对相应数据有引用的函数。
methods:是包装js方法。
好了。。今天就先写到这，主要是vue入门，搭建环境，工程，以及简单使用。下篇会写一些深入了解、使用，不断踩坑、填坑的历程。
作者：水木轩昊昊
链接：https://www.jianshu.com/writer#/notebooks/34350102/notes/41608375
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论