vuw-cli 全局安装

npm install  -g vue-cli

构建项目

# 创建项目
mkdir vue-webpack
cd vue-webpack
# 创建模板
vue init webpack 
# 安装依赖包
npm install
# 运行项目
npm run dev
# 访问

http://localhost:8080

# 简单的Vue Webpack项目构建完成

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

跨域代理配置

#config目录下 index.js 文件配置如下， 可以配置多个

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://10.43.22.175:9000',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '/api'
        },
        router: {
          // when request.headers.host == 'dev.localhost:3000',
          // override target 'http://www.example.org' to 'http://localhost:8000'
          '10.43.22.175:8080' : 'http://10.43.22.175:9000'
        }
      },
      '/activity': {
        target: 'http://10.43.22.149:8081',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/activity': '/activity'
        },
        router: {
          // when request.headers.host == 'dev.localhost:3000',
          // override target 'http://www.example.org' to 'http://localhost:8000'
          '10.43.22.175:8080' : 'http://10.43.22.149:8081'
        }
      }
    }
  }
}

vue-router 参数

1. query

1.this.$router.push({path:'history', query:{id: '1111'}});
下一个页面通过this.$route.query.id访问路由参数
 总结：1. 强制刷新，query不会丢参
 2. query会拼接到url上 （/history?id=1111）

2. params

2.this.$router.push({'name': 'history', params: {id: '1111'}});
下一个页面通过this.$route.params.id访问路由参数
 总结：
    1. 页面刷新参数会丢失
    2. 不会拼接到url上 例 （/history）
    3.   router.js 中： 需要添加name属性
    {
      path: 'history',
      name: 'history',
      meta: {
        requireAuth: true,
        title: '历史记录'
      },
      component: resolve => require(['@/views/history.vue'], resolve)
    }
    4.注意： 用path访问 参数 undefined
        例：
        this.$router.push({'path': 'history', params: {id: '1111'}});
        # 下一个页面通过this.$route.params.id访问路由参数
        undefined

3.其他 :id

# 跳转
this.$router.push({'path': 'history/' + row.id});
or 
<router-link :to='`/history/${item.id}`'></router-link>

# router.js 中：
{
  path: 'history/:id',
  meta: {
    requireAuth: true,
    title: '历史记录'
  },
  component: resolve => require(['@/views/history.vue'], resolve)
},
下一个页面通过this.$route.params.id访问路由参数
1. 页面刷新参数不会丢失
2. 会拼接到url上 例 （/history/1111111） 

未完待续