zoukankan      html  css  js  c++  java
  • 从无到有之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一个潜逃路由就有了

  • 相关阅读:
    读书笔记之理想设计的特征
    一些javascript 变量声明的 疑惑
    LINQ 使用方法
    Google MySQL tool releases
    读书笔记之设计的层次
    EF之数据库连接问题The specified named connection is either not found in the configuration, not intended to be used with the Ent
    转载 什么是闭包
    javascript面向对象起步
    Tips
    数据结构在游戏中的应用
  • 原文地址:https://www.cnblogs.com/lyz1991/p/5561472.html
Copyright © 2011-2022 走看看