從無到有之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一個潛逃路由就有了