vue.js 2.0简介
vue.js2.0 是目前很先进,也很流行的MVVM前端开发框架,设计灵感来源于angularjs,经过完善简化,和优化之后一个相当轻巧功能强大的框架。最近淘宝先给Apache组织的weex，相当于一个vue-native框架，更多详细介绍去看 vue.js的官网吧。
准备工作
现在的前端开已经完全的工程化了，自动化了，有非常完善的项目构建工具，几行命令，分分钟创建一项目，包括项目文件，开发依赖，http服务器，"编译器",打包工具，应有尽有，当然这都归功于nodeJs。
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好，在我看来，在web开发领域大有取代php可能性。
NPM是随同NodeJS一起安装的包管理工具，类似linux RPM，可以下载第三方包到本地使用，安装第三方命令行cli，上传自己的 第三方包和cli，是开发过程成中最常用的命令，这里vue-cli我们初始化项目用的命令行，由于网络问题国外的镜像是在太卡，要改成淘宝的镜像：
npm config set registry https://registry.npm.taobao.org// 配置后可通过下面方式来验证是否成功
npm config get registry// 或npm info express
其他必备工具 webpack
安装：$ npm install webpack -g
暂时没了.....准备工作结束了， 对了补充一下一上操作使用git-bash（mingw）非常好用的命令行工具。
安装vue2.0
# 全局安装 vue-cli $ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
执行一上命令会得到看到这样的的界面
Clipboard Image.png
说明一切顺利。
Clipboard Image.png
项目初始化成功！
然后：
# 安装依赖，走你
$ cd my-project
$ npm install $ npm run dev
不出意外的话会看到
Clipboard Image.png
有几个会出错的原因，可能是因为端口占用，比如tomcat的8080端口，你可以在配置中修改端口：./build/dev-server.js 14行
// default port where dev server listens for incoming trafficvar port =8899;
然后重新执行 npm run dev 命令 即可。
Clipboard Image.png
看到这个界面说明一切就绪了，在准备开发之前还是先来熟悉一下目录文件吧下面一张截图：
Clipboard Image.png
简单了解一下即可，详细了解就去搜索引擎去找。
开始开发了！
打开你心爱顺手的编辑器，open folder->vue.2.0
Clipboard Image.png
然后插入点什么保存，在看看浏览器已经自动刷新了,对，这就是自动化的好处。
简单讲一下代码#app就是所谓的根组件，所有组件都应该是他的子孙。
然后展开src看到main.js 这个基本是不需要动的，就是项目的js入口文件。
Clipboard Image.png
App.vue 是就是根组件，hello.vue 就是子组件，打开App.vue
Clipboard Image.png
一会看到一个非常清爽的组件代码结构。顶部 HTML模板， 中部ES6 JS 底部CSS，不能更清晰了吧，上面的ES6新标准，在网上可以找到很多文章教程，看一看就可以开发了。
可能在上面的js代码洒脱的敲了两个换行，在保存的时候可能会遭遇下面这张图。
Clipboard Image.png
其实并没有什么错，真是代码的缩进和规范出了问题，目前看来这种检测比python还是有点变态的，先把它干掉，先学习在说，打开文件./build/webpack.base.conf.js 36行
删掉，然后 ctrl+c ，再 npm run dev 就可以了,修改一下JS代码试试吧。
配置代理
在真正开发项目的时候,会遇到跨域的问题，我们的前段开发服务器如何与后端通讯，这个时候就要用到代理了，这个配置也非常简单的。打开./build/dev-server.js 17行改为
var proxyTable = { '/api': { target: 'http://xxxx.com' }}
配置完这个之后，同样要重启http服务器，在npm run dev 你会看到
Clipboard Image.png
然后在浏览器里面访问下 http://localhost:8899/api/user/status/get 吧。
安装ajax模块
axios.js 是官方推荐的，基于Promise的ajax库，用了一下比较好用。
安装：npm install axios
得到：√ All packages installed (xxx) 安装成功
例子：hello.vue
<template>
<div class="hello">
<h1 @click="test()">{{ name }}</h1>
<ul>
<li v-for="item in lists"> {{ item.articleTitle }} </li>
</ul> </div>
</template>
<script>
import axios from 'axios';
export default { data () {
return { name:"vue", lists:null } },
methods:{ test(){ alert(2); },
get_list() {
var self = this;
let callback = {
success:function(data)
{ var result = data.data; if(result.statusCode == 200)
{ self.lists = result.result; } },
error:function(data) { console.log(data); } }
let apiURL = '/api/stags/articles?tags=%E6%A0%BC%E9%9A%86%E6%B1%87&limit=22&page=1'; axios.get(apiURL).then(callback.success,callback.error) } }, created(){ this.get_list(); }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1 { color: #42b983;}</style>
先到这里了....以后陆续补充吧。发现bug和错别字顺手改到吧，落掉哪一步也记得补充上哦。
网友评论