Vue CLI标准开发模式_vuecli模式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41842236/article/details/124851776

本文详细介绍了VueCLI项目的目录结构，包括组件、路由、公共组件的实现。通过Login.vue和Index.vue组件展示了用户登录和主页的实现，使用axios进行数据交互。路由部分讲解了如何配置按需加载的路由，并设置404页面。Header.vue组件作为公共组件，实现了用户登录状态的展示和管理。同时，文章还提及了工具包request.js的使用，以及App.vue根组件和main.js主入口文件的角色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue CLI目录概览

在这里插入图片描述

二、vue cli中的组件

<template>
  <!--登录组件-->
  <div>
    <div class="container-fluid">
      <div class="col-sm-5 col-sm-offset-4">
        <h2>{{msg}}</h2>
      </div>
      <div class="col-sm-6 col-sm-offset-3">

        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <input type="text" v-model="admin.username" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <input type="password" v-model="admin.password" class="form-control">
            </div>
          </div>
        </form>
      </div>
      <div class="col-sm-5 col-sm-offset-4">
        <input type="button" style="" value="登录" class="btn btn-block btn-primary" @click="login">
      </div>
    </div>

  </div>
</template>

<script>
  import instance from "../utils/request";

  export default {
    name: "Login",
    data(){
      return {
        msg: '欢迎登录',
        admin: {},
      }
    },
    methods: {
      login(){
        console.log("登录数据",this.admin);
        //发送axios请求
        instance.post('/login',this.admin).then(res => {
          //console.log(res.data);
          const result = res.data;
          if (result.success){
            //console.log(res.data);
            //前端存储token信息
            localStorage.setItem("token", result.token);
            //切换到主页
            this.$router.push({name: 'Index'});
          }else {
            alert(result.msg);
          }
        });
        //this.$router.push({name: 'Index'})
      }
    }
  }
</script>

<style scoped>

</style>

Index.vue

<template>
  <!--主页组件-->
  <div>
    <!--展示公共组件-->
    <Header></Header>
    <!--展示路由 注意：router-view标签需要一个根标签进行包含！ -->
    <router-view></router-view>
  </div>
</template>

<script>
  import instance from "../utils/request";
  import Header from "../components/Header";
  export default {
    name: "Index",
    components: {Header},
  }
</script>

<style scoped>

</style>

404.vue

<template>
  <div>
    <h2>{{msg}},<a href="#/">返回主页</a></h2>
  </div>
</template>

<script>
  export default {
    name: "404",
    data(){
      return {
        msg: '当前页面走丢了'
      }
    }
  }
</script>

<style scoped>
  h2{
    color: red;
  }
</style>

user/Index.vue

<template>
  <div>
    <h3>用户列表</h3>
  </div>
</template>

<script>
  export default {
    name: "Index"
  }
</script>

<style scoped>

</style>

三、vue cli中的路由

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/*解决重复点击链接报错的问题*/
const originalPush = Router.prototype.push;
Router.prototype.push = function(location) {
  return originalPush.call(this, location).catch(err => err)
};

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: ()=>import('../views/Login')    //按需加载路由组件
    },
    {
      path: '/index',
      name: 'Index',
      component: ()=>import('../views/Index'),    //按需加载路由组件
      children: [   //配置子路由
        {
          path: '/emps',
          name: 'Emps',
          component: ()=>import('../views/emp/Index')
        },
        {
          path: '/depts',
          name: 'Depts',
          component: ()=>import('../views/dept/Index')
        },
        {
          path: '/users',
          name: 'Users',
          component: ()=>import('../views/user/Index')
        },
        {
          path: '/orders',
          name: 'Orders',
          component: ()=>import('../views/order/Index')
        },
      ],
    },
    {
      path: '/',
      redirect: '/index'   //配置默认路由
    },
    {
      path: '*',  //匹配所有路由
      name: '404',
      component: ()=>import('../views/404')    //按需加载路由组件
    },
  ]
})

四、vue cli中的公共组件

components/Header.vue

<template>
  <div>
    <div class="container-fluid">
      <div class="row" >
        <div class="col-sm-12">
          <h2>欢迎进入员工管理系统<span v-show="isLogin">，欢迎{{admin.username}}</span></h2>
        </div>
      </div>
      <div class="row">
        <div style="float: right">
          <a href="" v-show="isLogin" @click.prevent="logOut">退出登录</a>
          <router-link :to="{name: 'Login'}" v-show="!isLogin">立即登录</router-link>
        </div>
      </div>
    </div>
    <router-link :to="{name: 'Emps'}">员工管理</router-link> &nbsp;&nbsp;
    <router-link :to="{name: 'Depts'}">部门管理</router-link> &nbsp;&nbsp;
    <router-link :to="{name: 'Users'}">用户管理</router-link> &nbsp;&nbsp;
    <router-link :to="{name: 'Orders'}">订单管理</router-link>
  </div>
</template>

<script>
  import instance from "../utils/request";

  export default {
    name: "Header",
    data(){
      return {
        msg: '主页组件',
        admin: {}
      }
    },
    created() {
      //从localStorage中获取token
      let token = localStorage.getItem("token");
      //发送axios请求，根据token获取用户信息
      instance.get('/token?token='+token).then(res => {
        this.admin = res.data;
      })
    },
    computed: {
      isLogin(){
        return this.admin.username;
      }
    },
    methods: {
      logOut(){
        //获取token
        let token = localStorage.getItem("token");
        //发送axios请求，根据token删除用户信息
        instance.delete('/token?token='+token).then(res => {
          //切换到主页
          //this.$router.push({name: 'Index'});
          this.admin = {};
        })
      }
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述

五、vue cli中的工具包

utils/request.js

import axios from "axios";

//创建axios实例
const instance = axios.create({
  timeout: 5000,
  baseURL: 'http://localhost:8989'
});

//请求拦截器
instance.interceptors.request.use(config => {
  //console.log("请求拦截器");
  return config;
});
//响应拦截器
instance.interceptors.response.use(response => {
  //console.log("响应拦截器");
  return response;
}, error => {
  //console.log("响应错误拦截器");
  alert('当前服务不可用，请稍后重试！')
});

//暴露axios实例对象
export default instance;

六、vue cli中的根组件 App.vue

<template>
  <div id="app">
    <!--展示路由组件-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
a{
  font-size: 18px;
}
</style>

七、vue cli中的主入口 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'
import router from './router'

//引入Bootstrap样式
import '@/assets/bootstrap/css/bootstrap.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})