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>