vue起步步骤

创建router路由文件夹

在路由文件夹里导入vue、vue-touter和各个页面

	// 引入vue
 	import Vue from 'vue';
 	// 引入vue-router
    import VueRouter from 'vue-router';
    // 引入shouye.js路由文件
    import shouye from './shouye'
    // 引入登录页面
    import login from '../view/login'
    // 引入注册页面
    import regist from '../view/regist'

    // 注册插件vue-router
    Vue.use(VueRouter)

    //导出
    export default new VueRouter({
      // 路径里没有#
      mode:'history',
      routes:[
        // shouye.js里也有很多路由
        ..shouye,
        {
          // 登录
          path: '/login',
          component: login
        },
        {
          // 注册
          path: '/regist',
          component: regist
        }
      ]
    })

shouye.js路由文件

 <!-- 引入各个页面 -->
    import Tuijian from '../view/tuijian'
    import Singer from '../view/singer'
    import Sort from '../view/sort'
    import Search from '../view/search'
    import Index from '../view/index'

    export default [
      {
        path: '/',
        component: Index,
        children: [
          {
            path: '/tuijian',
            component: Tuijian
          },
          {
            path: '/singer',
            component: Singer
          },
          {
            path: '/sort',
            component: Sort
          },
          {
            path: '/search',
            component: Search
          },
        ]
      },
    ]

配置main.js

  // 引入vue             *必填
  import Vue from 'vue'
  // 引入App.vue主界面    *必填
  import App from './App.vue'
  // 引入路由文件         *必填
  import router from './router'
  // 引入axios插件  axios不用注册
  import axios from 'axios'
  // 引入vant插件
  import Vant from 'vant'
  // 引入ElementUI插件
  import ElementUI from 'element-ui';

  // 注册
  Vue.use(Vant);
  Vue.use(ElementUI);

  // 将axios挂载到原型链上  方便各个页面调用
  Vue.prototype.$axios = axios
  //阻止启动生产消息
  Vue.config.productionTip = false

  new Vue({
    render: h => h(App),
    router: router,
  }).$mount('#app')

App.vue

<template>
  <div id="app">
      // 根据路由动态生成页面
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  components: {
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>

commponents组件文件

在这里写组件 比如头部组件和底部导航组件

view页面文件

在这里存放各个页面文件
比如：index.vue主页
user/login 登录页
user/regist 注册页

连接后台接口

methods: {
  add () {
    if (this.username == '') {
      return
    }
    if (this.password == '') {
      return
    }
    // post 传参方式     参数一 接口地址   参数二  要传的参数   参数三 请求头
    this.$axios.post('http://127.0.0.1:3000/login', qs.stringify({
      username: this.username,
      password: md5(this.password)
    }), {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charsert=utf8"
      }
    }).then(res => {
      console.log(res)
      if (res.data.code == 1) {
        alert(res.data.msg)
        this.$router.history.push('tuijian')
      } else {
        alert(res.data.msg)
      }

    })
  },
},