Vue.js学习系列（八）---使用路由搭建单页应用(一)

之前已经通过命令

cnpm install vue-router --save

安装了vue-router。接下里我们在webpack.config.js加入别名

resolve: {

    alias: {vue: 'vue/dist/vue.js'}

  }

alias是什么？为什么要加alias配置项，在官方文档岁alias有这样的描述

修改完之后的webpack.config.js是这样子的:

var path = require('path')

var webpack = require('webpack')

 

module.exports = {

  entry: './src/main.js',

  output: {

    path: path.resolve(__dirname, './dist'),

    publicPath: '/dist/',

    filename: 'build.js'

  },

  resolveLoader: {

    root: path.join(__dirname, 'node_modules'),

  },

  module: {

    loaders: [

      {

        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,

        loader: 'vue'

      },

      {

        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,

        loader: 'babel',

        exclude: /node_modules/

      },

      {

        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,

        loader: 'file',

        query: {

          name: '[name].[ext]?[hash]'

        }

      }

    ]

  },

  resolve: {

    alias: {vue: 'vue/dist/vue.js'}

  },

  devServer: {

    historyApiFallback: true,

    noInfo: true

  },

  devtool: '#eval-source-map'

}

 

if (process.env.NODE_ENV === 'production') {

  module.exports.devtool = '#source-map'

  // http://vue-loader.vuejs.org/en/workflow/production.html

  module.exports.plugins = (module.exports.plugins || []).concat([

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: '"production"'

      }

    }),

    new webpack.optimize.UglifyJsPlugin({

      compress: {

        warnings: false

      }

    })

  ])

}

在按照同样的方法，写第二个组件secondcomponent.vue

<template>

  <div id="secondcomponent">

    <h1>I am another page</h1>

    <a> written by {{ author }} </a>

    <p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>

  </div>

</template>

 

<script>

export default {

  data() {

    return {

      author: "微信公众号 jinkey-love",

      articles: [],

    }

  }

  }

}

</script>

 

<style>

</style>