vue项目总结

项目结构如上：api：用于放置所有网络请求api接口的目录，

assets:用于放置所有的静态资源，

components：用于放置所有局部组件，components下里面包含可以细分各个模块的文件目录

router：用于配置路由的文件目录

store：用于放置vuex里面的文件内容

tools：用于放置公共的工具类js代码

utils：用于放置axios配置文件的文件目录

views:用于放置页面级的组件。

所用的技术有：

vue：vue-cli采用命令 npm install -g @vue/cli，全局安装脚手架，vue create 项目名 根据自己需要配置生成项目。

elementUi:npm i element-ui -S安装，在main.js中全局引入。采用：：v-deep和！Importent覆盖默认样式

axios:1、通过命令行工具运行 npm install axios 2、在utils下的配置文件axios.js中引入并配置基本信息导出，3、在mian.js引入axios.js文件并写入vue原型当中Vue.prototype.$axios = Axios

vue-router ：在文件配置对应的路由，并采用路由守卫完成登录校验证

node.js:配置后端接口路由，jsonwebtoken 用于生成token。

mysql：增删查改语句

在这个项目中自己封装过一个导航栏的组件结合elmentUI

<template>
<div>
 <el-breadcrumb separator-class="none" >
     <el-tabs @tab-click="handleClick" v-model="activeName">
        <el-tab-pane v-for="item in rooterList"  :label="item.content" :name='item.newpath.path' :key="item.id"></el-tab-pane>
      </el-tabs>
</el-breadcrumb>
</div>
</template>
<script>
export default {
    props:{
        datamsg:{
            type:Array,
            required:true
            
        }
    },

    data() {
        return {
            rooterList:[],
            activeName:'',
        }
    },
    created() {
       this.rooterList=this.datamsg
       if(this.$route.path==this.rooterList[0].newpath.path){
               this.activeName= this.rooterList[0].newpath.path
       }
       else{
              this.activeName=this.$route.path
       } 

    },
    methods: {
        handleClick() {    
        for(let i=0 ;i<this.rooterList.length;i++){
           if(this.activeName==this.rooterList[i].newpath.path){
                this.$router.push(this.rooterList[i].newpath.path)
           }
        }
      }
    },
}
</script>