npm install -g vue-cli 

cd test 

npm install vue-router 
npm i element-ui -D 

//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)(\"htmlcode">

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="/UploadFiles/2021-04-02/icon_nav_button.png">



//index.vue(主页模块，套了一点elementUI，有点东西好看点= =..)

<template>
 <div>
  <h3>我是主页模块</h3>
  <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">处理中心</el-menu-item>
   <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
   </el-submenu>
   <el-menu-item index="3">订单管理</el-menu-item>
  </el-menu>
 </div>

</template>

<script>
 export default {
  methods:{
   handleSelect:function(key,keyPath){
    console.log(key,keyPath);
   }
  }
 }
</script>






//info.vue(主页模块，套了一点elementUI，有点东西好看点= =..)

<template>
 <h3>{{msg}}</h3>
 <div>
  <el-alert
    title="成功提示的文案"
    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 “中有写过 


最后npm run dev 查看效果就ok~如果想改绑定的端口号或者主机号，则在package.json中对应改就好 


example:


"scripts": {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --port 8181 --open --inline --hot",
 "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 }



其中端口号是dev中的 --port <port>,主机号则为--host <hostname/ip>就比如我这里则绑定的为8181端口。
最后给大家展示一下效果图吧~没看过vue-router的同学请自行看文档= =…我这里只是最基础的展示了而已 


 


http://localhost:8181/#/index 


 


http://localhost:8181/#/info 


 


http://localhost:8181/#/discovery 


 


http://localhost:8181/#/setting
其实都是一些很简单的代码和组件划分，大家应该看一看就明白的了，最后vux你快更新2.0吧555~不说了我去看vuex了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。