vue --- studyVueOne 总结（1）

1. export 和 export default

区别： export与export default均可用于导出常量、函数、文件、模块等

1. 在一个文件或模块中，export、import可以有多个，export default仅有一个

2. 通过export方式导出，在导入时要加{ }，export default则不需要

3. export能直接导出变量表达式，export default不行。

    export function Func () { }
    import { Func } from 'func'

    export default function Func () { }
    import Func from 'func'

2. 路由的控制:vue-router

vue-router是Vue.js官方的路由插件，适合用于构建单页面应用，路由用于设定访问路径，并将路径和组件映射起来。

下载：

npm install vue-router --save

配置：在main.js文件中导入并使用：

import VueRouter from 'vue-router'   //导入组件    
Vue.use(VueRouter);        //使用组件

设置主页面和子页面detail 及其子页面：routes:[{...},{...}]

let router = new VueRouter({
    mode:'history',
    routes: [
        {
            path: '/',          //主页面及其组件
            component: IndexPage 
        },
        {
          path:'/detail',        //子页面
          component:Detail,
          redirect:'/detail/count',  //直接访问detail页面时重定向到count页面
          children:[                //detail的子页面及使用的组件
          {
            path: 'analysis',            //  /detail/analysis
            component: DetailAnalysis
          },
          {
            path: 'count',
            component: DetailCount        //   /detail/count
          }
        ]
     ]
})

最终路由需要注入到实例中。

3. vue2.0快速搭建一个测试的api接口(json-server、express)，模拟后台数据处理

安装插件：

npm install vue-resource --save

在main.js中引入

import VueResource from 'vue-resource' 
Vue.use( VueResource )

之后就可以在任意组件中使用：

this.$http.get( ).then( (res)  => {} , (err) => { })

然后有两种方法实现对数据的获取，模拟后台和数据的处理。

第一种：json-server，适合 get请求：

安装：

cnpm install json-server --save

配置：找到build/webpack.dev.conf.js，文末添加如下代码：

//实例化jsonServer
const jsonServer = require ('json-server')
const apiServer = jsonServer.create()
const apirouter = jsonServer.router('db.json') //数据关联，db.json和index.html同级
const middlewares = jsonServer.defaults()

apiServer.use(middlewares)
apiServer.use('/api',apirouter)    //数据使用的路径
apiServer.listen(3000, () => {  //监听端口
  console.log('JSON Server is running')
})

接着设置config/index.js中proxyTable：（浏览器有同源策略，8080端口是文件端口，而这边监听的是3000端口）

    proxyTable: {
          '/api':'http://localhost:3000/'
    },

这样：当在浏览器地址栏输入：http://localhost:8080/api 就等同于http://localhost:3000端口了。

并且需要在根目录下创建db.json文件用于获取数据。

第二种：通用方法express,支持get和post请求

同样，配置：找到build/webpack.dev.conf.js，文末添加如下代码：

var express = require('express') 
var apiServer = express()  
var bodyParser = require('body-parser')  
apiServer.use(bodyParser.urlencoded({ extended: true }))  
apiServer.use(bodyParser.json())  
var apiRouter = express.Router()  
var fs = require('fs')  
apiRouter.route('/api') //接口路径  
  .all(function (req, res) {  
    fs.readFile('./db.json', 'utf8', function (err, data) {  //读取接口文件  
      if (err) throw err  
      var data = JSON.parse(data)  
      if (data[req.params.apiName]) {  
        res.json(data[req.params.apiName])  
      }  
      else {  
        res.send('no such api name')  
      }  
  
    })  
  })  
  
  
apiServer.use('/api', apiRouter);  
apiServer.listen(3000, function (err) {  
  if (err) {  
    console.log(err)  
    return  
  }  
  console.log('Listening at http://localhost:' + 3000 + '\n')  
})

接着设置config/index.js中的proxyTable：

    proxyTable: {
          '/api':'http://localhost:3000/'
    },

并且设置db.json数据。

4. <keep-alive>

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。