Vue第三天，失败了，求解

问题：点击第一页第二页的东西都没有显示第一第二页的内容，只是导航栏的地址变了，第一页的链接点了但是没有变地址，压着command再点击会打开新的页面，导航的地址变为/first，但是也没有显示first页面

求大神指点～～

效果

点击第二页：

1、new Vue问题

问题不让用new开头

改正：

报错：

改正：

2、代码格式：

每一行后面都不需要“;”,写了会报错

代码如下：

App.vue

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <h1>{{message}}</h1>

    <ul>

      <li><router-link to="/first">第一页</router-link></li>

      <li><router-link to="/second">第二页</router-link></li>

    </ul>

  </div>

</template>

 

<script>

export default {

  name: 'app',

  data () {

    return {

      message: 'hello world!'

    }

  },

  components: {}

}

</script>

 

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c5047;

  margin-top: 60px;

}

</style>

 

 

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import VueResource from 'vue-resource'

import second from './components/second.vue'

// 开启debug模式

Vue.config.debug = true

Vue.use(VueRouter)

Vue.use(VueResource)

Vue.config.productionTip = false

 

// 定义组件, 也可以像教程之前教的方法从别的文件引入

const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }

// 创建一个路由器实例

// 并且配置路由规则

const router = new VueRouter({

  mode: 'history',

  base: __dirname,

  routes: [

    {

      path: '/first',

      components: First

    },

    {

      path: '/second',

      component: second

    }

  ]

})

 

const app = new Vue({

  el: '#app',

  router: router,

  components: { App },

  template: '<App/>'

})

 

Vue.use(

  {

    app

  }

)

 

 

second.vue

<template>

  <div id="second">

    <h1>I am a title.</h1>

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

  </div>

</template>

<script type="text/javascript">

export default {

  data () {

    return {

      author: 'Symiac'

    }

  }

}

</script>

<style>

</style>

 

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'

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          'vue-style-loader',

          'css-loader'

        ],

      },      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: {

          loaders: {

          }

          // other vue-loader options go here

        }

      },

      {

        test: /\.js$/,

        loader: 'babel-loader',

        exclude: /node_modules/

      },

      {

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

        loader: 'file-loader',

        options: {

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

        }

      }

    ]

  },

  resolve: {

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

       vue: 'vue/dist/vue.js'

    },

    extensions: ['*', '.js', '.vue', '.json']

  },

  devServer: {

    historyApiFallback: true,

    noInfo: true,

    overlay: true

  },

  performance: {

    hints: false

  },

  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({

      sourceMap: true,

      compress: {

        warnings: false

      }

    }),

    new webpack.LoaderOptionsPlugin({

      minimize: true

    })

  ])

}