详解vue+vueRouter+webpack的简单实例

//package.json
"dependencies": {
 "element-ui": "^1.0.4",
 "vue": "^2.1.0"
 }
//webpack.config.js
module: {
 rules: [
  {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
   // vue-loader options go here
  }
  },
  {
  test: /.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
  },
  {
  test: /.css$/,
  loader: 'style-loader!css-loader'
  },
  {//添上这条规则，这是elementUI要用到的
  test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
  loader: 'file-loader'
  },
  {
  test: /.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
   name: '[name].[ext]?[hash]'
  }
  }
 ] }

6、分模块，写组件
下面先展示我的文件目录

test
dist
build.js
node_modules
…
src
App.vue
discovery.vue
index.vue
info.vue
main.js
setting.vue
.babelrc
.gitignore
index.html
package.json
README.md
webpack.config.js

//App.vue（这里仿制vux的下方tabbar写了一个组件,所以有点多，代码有点烂，请原谅）
<template>
 <div id="app">
 <router-view></router-view>
 <div class="tabbar" @click="select">
  <router-link :class="{'selected':indexPage === 'index'}" to="/index">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_button.png" alt="">
  <label>主页</label>
  </router-link>
  <router-link :class="{'selected':indexPage === 'info'}" to="/info">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_msg.png" alt="">
  <label>信息</label>
  </router-link>
  <router-link :class="{'selected':indexPage === 'discovery'}" to="/discovery">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_article.png" alt="">
  <label>发现</label>
  </router-link>
  <router-link :class="{'selected':indexPage === 'setting'}" to="/setting">
  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_cell.png" alt="">
  <label>设置</label>
  </router-link>
 </div>
 </div>
</template>
<script>
 export default {
 name: 'app',
 data () {
  return {
  radio:'1',
  indexPage:'index'
  }
 },
 methods:{
  select(event){
  function findA(target){
   if(target.nodeName != 'A'){
   return findA(target.parentNode)
   }
   return target;
  }
  var modules = findA(event.target).lastElementChild.innerHTML;
  if(modules == '主页'){								 
 2/5   首页 上一页 1 2 3 4 5 下一页 尾页