Vue.js（慕课网学习笔记一）

使用vue开始一个项目

使用vue构建一个大型的项目 官方推荐使用NPM安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。
使用NPM很简单，只需下面的几步就可以开始一个普通的模板项目：

全局安装 vue-cli
npm install –global vue-cli

创建一个基于 webpack 模板的新项目 也可以是Browserify 只需把下面一行的webpack改掉即可
vue init webpack my-project

进入工程安装依赖
cd my-project
npm install

运行项目
npm run dev

模拟后台数据

1 找一个json文件放在项目的根目录下面。
2 去项目的 build=>dev-server.js文件中配置请求你路径
3 配置方法：

var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();

apiRoutes.get('/seller',function(req,res){
res.json({
    resCode : 0,
    data : seller
});
});
apiRoutes.get('/goods',function(req,res){
res.json({
    resCode : 0,
    data : goods
});
});
apiRoutes.get('/ratings',function(req,res){
res.json({
    resCode : 0,
    data : ratings
});
});

app.use('/api', apiRoutes);

配置完成之后执行npm run dev 重启服务在浏览器中输入http://localhost:8080/api/seller，http://localhost:8080/api/goods， http://localhost:8080/api/ratings就可以看到请求到的json数据了。

vue-router

项目中肯定会用到页面的跳转，使用vue-router可以很好的控制调节界面的跳转。
使用vue-router ：

1. 在package.json中的dependencies中添加vue-router的依赖 如”vue-router”: “^2.3.1”
2. 在项目中router文件夹下面的index.xml中引入vue-router : import Router from ‘vue-router’ 并使用Vue.use(Router)
3. 创建Router实例 在实例中配置各种路径。

网络请求

一个正式的项目基本都有跟后台数据交互，vue中目前官方推荐使用axios
使用方法：
npm install axios
在使用的类中引入 import axios from ‘axios’
get方法：

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post方法：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));