vue-cli 构建web应用

webpack：前端资源模块化管理和打包工具，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。https://webpack.js.org/

vue.js：它是以数据驱动和组件化思想构建web应用的JavaScript库。https://cn.vuejs.org/v2/guide/

我们可以借助vue-cli工具快速创建一个基于vue的web应用，操作如下。

step1：npm install -g cnpm --registry=https://registry.npm.taobao.org
step2：cnpm install -g vue-cli
step3：vue init webpack test_project
step4：cd test_project
step5： cnpm install

step3默认创建基于vue2.0的项目，在创建的流程中，我们引入vue-router库。
上面操作完毕后，执行npm run dev运行该项目，默认8080端口启动，要进行端口修改，找到test_project/config/index.js，把下面的8080改为其他就可以了。所以实际上npm run dev 就是启动了一个基于express的http server。

    dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
    }

注意到以上配置的proxyTable字段，该字段的作用是对当前启动的web应用的网络请求进行代理转发，比如你的web服务部署在线下的xxx.xxx.xxx.xxx上的8081端口，要访问该主机上的web服务的/testcase/xxxx 地址，可以把proxyTable设置为如下：

proxyTable: {   '/testcase': {
                target: 'http://xxx.xxx.xxx.xxx:8081'
            }},

创建项目的时候我们引入了vue-router库，它能够实现vue应用的路由功能。
vue-cli 默认创建的路由配置文件在 /router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'Hello',
        component:Hello
    }]
})

npm run dev 顾名思义就是开发执行开发环境，当我们开发完需要发布的时候，使用npm run build命令执行就可以了。
另外我们还可以配置build生成的路径，通过以下内容配置。

       index: path.resolve(__dirname, '../../tsmanager-dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../../tsmanager-dist'),
        assetsSubDirectory: '../tsmanager-dist',
        assetsPublicPath: '/',