从无到有之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一个潜逃路由就有了

巴特西

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

最新文章

热门文章