从无到有之webpack+vuerouter的简单例子以及各个属性解释

之前一直没玩过webpack和vue，近两周才看这玩意，本文纯属自己的实验+之前angular作战经验的理解一些入门文章

首先webpack关于vue以及各个包

module.exports = {
    // entry: { //配置入口文件，有几个写几个
    //   'static/js/home/login': path.resolve(__dirname, './components/home/login.js')
    // },
    entry: './conponent/demo2/main.js',
    output: {
        path: './dest',
        publicPath: './dest/',这个在router是动态加载异步时候有用，head里面会插入一个asyc属性，没有这个会显示文件路径错误
        filename: '[name].js',
        chunkFilename:'test[id].js'//这个如果没有的话，那么那些asyc属性里的文件名字就是1.1，2.2等之类的命名。。。
    },
    module: {

        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.less$/,
                loader: 'style!css!autoprefixer!less'
            },
            {
                test: /\.(html|tpl)$/,
                loader: 'html-loader'
            },
            {
                // edit this for additional asset file types
                test: /\.(png|jpg|gif)$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: '[path][name].[ext]?[hash]'
                }
            }
        ]
    }
};

　　包文件：

{
  "name": "paycenter",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lyz",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-runtime": "^6.9.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "style-loader": "^0.13.1",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.3.1",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.0"
  },
  "dependencies": {
    "vue": "^1.0.24",
    "vue-resource": "^0.7.0"
  }
}

　　

基本配置文件

然后新建一个路由配置文件：routerconfig.js

里面是路由的配置（demo所以就只写两个路由）

export default function routerconfig(router){    router.map({
'/home':{
            subRoutes:{
                '/bar':{
                    component:resolve=>{
                   require(['./demo/demo3.vue'],resolve)//这个resolve会在你html上的main文件里面自动生成一个asyc属性，属性值就是对应js的文件位置，
里面会异步按需加载对应的那个组件的js文件，所以webpack的配置文件里的publicpath和chunckfilname很重要

                    }
                }

            },
            component:resolve=>{
                require(['./demo/demo1.vue'],resolve)
            }
        },
        '/user':{
            name:'user',
            component:resolve=>{
                require(['./demo/demo2.vue'],resolve)
            }
        }
    })
}

 

然后看下demo1.vue文件的引用和ng的ui-router是一样的

<template>
    <p v-link="{path:'home/bar'}">demo1</p>
    <router-view></router-view>
</template>
<script>
    export default {
        route: {
            activate: function (transition) {
                console.log('进入!')//这里在每次进入该组件会触发
                transition.next()//这里如果写abort就是说这个路由下的组件的大门被关闭了，不可切换进来
            },
            deactivate: function (transition) {
                console.log('离开')//这里在每次离开改组件会触发
                transition.next()//同理这里abort就是说进来了不可离开
            }
        }
    }

</script>

 

这个时候运行webpack一个潜逃路由就有了