为了搞定毕设的页面，最近学习了一个纯Vue的后台管理系统，懂了，又没懂，只是会用用。

下面记录一下一些用法，虽然不大懂原理。。。。

安装

我的电脑里面已经装好了node那些环境了，直接用起来就行。

首先要创建项目

vue create project-name

然后进去目录，

npm install

npm run serve

跑起来，就能看到东西了。

然后需要什么就npm install XXX，直接导入就行了。

比如，我会使用到elemenet-ui进行开发，就进入它的官网，然后找到npm安装就行了。

npm i element-ui -S

路由、axios等同理。

页面

主要页面如下（看注释）

views/Main.vue

<template>
  <!--如el-xx的，都是element-ui的组件-->
  <el-container style="height: 100%">
    <el-aside width="auto">
        <!-- 引入的模块的组件，这相当于CommonAside里面的所有东西，只是被这个标签替代了 -->
        <!--另外，需要小写，大写用-间隔-->
      <common-aside></common-aside>
    </el-aside>
    <el-container>
      <el-header>
        <common-header></common-header>
      </el-header>
      <common-tag></common-tag>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 引入的组件。引入了就要用
import CommonAside from "../src/components/CommonAside";
import CommonHeader from "../src/components/CommonHeader";
import CommonTag from "../src/components/CommonTag";
// 导出，不导出的话不能像上面那样被别人引入
export default {
  	// 组件名，就是你以后导出的名字
  name: 'Home',
    // 使用的组件
  components:{
    CommonAside,
    CommonHeader,
    CommonTag
  },
    // 数据
  data() {
    return {}
  },
  //方法
  method:{

  },
// 创建时，自动调用
  created() {
    this.getList()
  }
}
</script>

<style lang="less">
.el-header{
  background-color: #333;
}
.el-main{
  padding-top: 0;
}
</style>

路由

需要安装router

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main'

// 使用路由
Vue.use(VueRouter)

//创建路由
const router = new VueRouter({
    mode: "history",
    // 具体的路由项，是固定写法
    routes: [
        {
            path: '/',
            name: 'Main',
            component: Main,
            children: [
                // 子路由，在这个页面进行跳转的
                {
                    path: '/home',
                    name: 'home',
                    component: () => import('../views/home')
                }, {
                    path: '/user',
                    name: 'user',
                    component: () => import('../views/user')
                }, {
                    path: '/mall',
                    name: 'mall',
                    component: () => import('../views/mall')
                }, {
                    path: '/page1',
                    name: 'page1',
                    component: () => import('../views/other/pageOne')
                }, {
                    path: '/page2',
                    name: 'page2',
                    component: () => import('../views/other/pageTwo')
                }
            ]
        },
        {
            path: '/login',
            name: 'login',
            component:()=>import('../views/login/login')
        }
    ]
})

// 导出路由
export default router

可以结合src/App.vue一起看看

<template>
  <div id="app">
      // 路由页面，既当前是在哪个路径的，就展示怎样的组件
      // 可以看到，现在是在/，要展示Main的
      <router-view></router-view>
  </div>
</template>

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

<style>
html,body{
  margin: 0;
  padding: 0;
}
#app{
  height: 100vh;
}
</style>

还有一个叫做路由守卫的使用

router.beforeEach((to, from, next) => {
    store.commit('getToken')
    const token = store.state.user.token
    // 没有token，直接回去login页
    if (!token && to.name !== 'login') {
        next({name: 'login'})
    }else{
        next()
    }
})

axios

路由跳转，可以直接用。

好像是什么很高级的用法（ES6？）是一个class

import axios from "axios";
import config from '../config/index'

const baseUrl = process.env.NODE_ENV === 'development' ?
    config.baseUrl.dev : config.baseUrl.pro;

class HttpRequest {
    // 构造函数
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }

    getInsideConfig() {
        const config = {
            baseUrl: this.baseUrl,
            header: {}
        }
        return config
    }

    interceptor(instance) {
        // 发送请求前要做什么
        instance.interceptors.request.use(function (config) {
            return config
        }, function (error) {
            return Promise.reject(error)
        });
        // 对响应数据做点什么
        instance.interceptors.response.use(function (response) {
            console.log(response, 'response')
            return response
        }, function (error) {
            console.log(error, 'error')
            return Promise.reject(error)
        });
    }
	// 以后就用这个封装好的
    request(options) {
        const instance = axios.create()
        options = { ...this.getInsideConfig(), ...options}
        this.interceptor(instance)
        return instance(options)
    }
}

export default new HttpRequest(baseUrl)

封装好之后怎么用？

export const getMenu = (param) => {
    return axios.request({
        url: '/permission/getMenu',
        method: 'post',
        data: param
    })
}

vuex

需要安装

具体可查官网使用，我这里只当它是个存储的，跨组件的存储

index.js

import Vue from "vue";
import Vuex from 'vuex'
import tab from './tab'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        // 有多少个就引多少个
        tab, user
    }
})

tab.js

export default {
    // 存的数据
    state: {
        isCollapse: false,
        // 存放面包屑的元素，默认有个首页
        tabsList: [
            {
                path: '/home',
                name: 'home',
                label: '首页',
                icon: 'home'
            }
        ],
        // 当前选中的菜单
        currentMenu: null
    },
    // 使用的方法
    mutations: {
        collapseMenu(state) {
            state.isCollapse = !state.isCollapse;
        },
        selectMenu(state, val) {
            if (val.name !== 'home') {
                // 不是首页
                state.currentMenu = val;
                const result = state.tabsList.findIndex(item => item.name === val.name)
                if (result === -1) {
                    state.tabsList.push(val);
                }
            } else {
                // 重置标识
                state.currentMenu = null;
            }
        },
        closeTag(state, val) {
            const result = state.tabsList.findIndex(item => item.name === val.name)
            state.tabsList.splice(result, 1)
        }
    }
}

怎么调用方法？

methods: {
  handleMenu() {
      // commit即可，需要参数可跟在后面
    this.$store.commit('collapseMenu')
  }
}

如何获取state里面的数据？

import {mapState} from 'vuex'
// 使用计算属性
computed: {
  ...mapState({
    tags: state => state.tab.tabsList
  })
}


// 或者
// this.$store.state.xxx.属性
computed: { 
    isCollapsed() {
      return this.$store.state.tab.isCollapse;
    }
  }

数据绑定

我突然发现一个非常震惊的东西，就是使用了vue，除了正常写页面外，如果需要让它展示某些数据，只要**{}或者用冒号:进行绑定，要使用方法的话，一般用@绑定事件，比如@click="xxx"**

所以，之后使用的话，只要写写样式，然后在需要数据的地方定义一下，然后让它与定义的data进行绑定，而数据就是通过axios请求后台获取，然后赋值到data上。如果需要跨组件请求的数据，或者需要暂时存一下的数据，可以存到localStorage或者使用vuex。

大致是这样吧，以后如果再有机会学习学习前端的知识，肯定不会总结得这么草。