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

type="success">
</el-alert>
<el-alert
title="消息提示的文案"
type="info">
</el-alert>
<el-alert
title="警告提示的文案"
type="warning">
</el-alert>
<el-alert
title="错误提示的文案"
type="error">
</el-alert>
</div>
</template>

<script>
export default {
data(){
return {
msg:'我是信息模块'
}
}
}
</script>

//discovery.vue(发现模块)
<template>
 <div>
  <h2>{{msg}}</h2>
  <el-steps :space="100" :active="active" finish-status="success">
   <el-step title="步骤 1"></el-step>
   <el-step title="步骤 2"></el-step>
   <el-step title="步骤 3"></el-step>
  </el-steps>
  <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
 </div>
</template>
<script>
 export default {
  data(){
   return {
    active:0,
    msg:'我是发现模块'
   }
  },
  methods:{
   next:function(){
    if(this.active++ > 2) this.active = 0
   }
  }
 }
</script>

//setting.vue(设置模块)
<template>
 <div class="block">
  <h3>{{msg}}</h3>
  <el-rate
    v-model="value2"
    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
    :allow-half="true">
  </el-rate>
  <span>{{value2}}</span>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    value2: null,
    msg:'我是设置模块'
   }
  }
 }
</script>

//main.js(主文件，声明全局router)
import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
import index from './index.vue'
import info from './info.vue'
import discovery from './discovery.vue'
import setting from './setting.vue'
Vue.use(Router);
Vue.use(ElementUI);
const router = new Router({
 routes:[
 {
  path:'/',
  component:index
 },
 {
  path:'/index',
  component:index
 },
 {
  path:'/info',
  component:info
 },
 {
  path:'/discovery',
  component:discovery
 },
 {
  path:'/setting',
  component:setting
 }
 ]});
new Vue({
  el: '#app',
  render: h => h(App),
 router:router
});

最后就是webpack的入口文件必然是要改成main.js的，出口文件的文件夹为dist,名字就你自己定了，在index.html里加上就好~具体可以在我的另一篇笔记”初识webpack “中有写过