无标题文章

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

來源：

著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。