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交互模式
(2)安装npm
找到自己项目的目录打开git bash:npm install(安装比较慢),然后编译,可以设置本地开发环境dev和生产上线环境build,那么我们本地编译就是:npm run dev
2、搭建项目
环境搭建完了,那看下项目结构吧。。。。。
(1) vue是单页面应用,当npm run dev后出现的就是该应用的index.html,其他的页面都是该页面路由过去的,下面是npm编译环境需要的配置。
(2)app.vue,是总组件,main.js中import app from '.app',页面显示app.vue中的内容。
(3)下面是要开始写页面代码了,主要在src中的view里面
(3)页面编码
vue的页面有自己的生命周期
首先created,mounted是在页面初始化的时候调用的,根据踩坑经验来说,调接口异步返回数据填充页面,最好将接口调用放到mounted里面;updated是页面初始化完后,页面数据有修改时都会调用,可以在此周期中加些判断条件以达到页面需要校验的效果;beforeDestroy是页面元素销毁,可以将不需要缓存的元素放在里面。
watch:是作为页面绑定元素的监听事件,实时监听,作为校验。
computed:vue中实时计算, 检测到数据发生变动时就会执行对相应数据有引用的函数。
methods:是包装js方法。
好了。。今天就先写到这,主要是vue入门,搭建环境,工程,以及简单使用。下篇会写一些深入了解、使用,不断踩坑、填坑的历程。