vue项目过程

目录结构

src下main.js

引入axios,element-ui
配置原型链

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//axios
import axios from 'axios'
//element-ui
import ElementUI from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false
//将axios添加Vue的原型链,添加到原型链中以后可以这样使用this.$axios
axios.default.baseURL = 'http://localhost:8080/'
//prototype:原型链
Vue.prototype.$axios = axios;
//再加上面两行↑
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

项目根目录下

vue.config.js

module.exports={
    devServer:{
        port:8080
    }
}

router下index.js

此组件作用为设置各组件映射路径

//引入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Admin from '../views/Admin.vue'
import NewsList from '../views/news/newsList.vue'
import NewsTypeList from '../views/newsType/newsTypeList.vue'
import Helloworld from '../components/HelloWorld.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Login
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    },
    {
        path: '/admin',
        name: 'admin',
        component: Admin,
        children:[
            {
                path: '/admin',
                name: 'welcome',
                component: Helloworld
            },
            {
                path: '/admin/newsTypeList',
                name: 'newsTypeList',
                component: NewsTypeList
            },
            {
                path: '/admin/newsList',
                name: 'newsList',
                component: NewsList
            }
        ]
    }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

vuex(store下index.js)

声明公共数据在vue实例中调用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //声明公共状态
    maxPageNum:5
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

调用

console.log(this.$store.state.maxPageNum)

登陆演示(存session)

<template>
    <div>
        用户名<input type="text" v-model="users.username">
        密码<input type="password" v-model="users.password"></td>
        <input type="button" value="登录" @click="login()"></td>
    </div>              
</template>
export default {
        name: 'Login',
        data() {
            return {
                users: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            login() {
                if (this.users.username == '') {
                    alert('用户名不能为空！');
                    return;
                }
                if (this.users.password == '') {
                    alert('密码不能为空！');
                    return;
                }

                this.$axios.post('selectUsersByNameByPass', this.users)
                    .then((response) => {
                        if(response.data==''){
                            alert('用户名或密码输入错误！');
                        }else{
                            this.$setSessionStorage('users',response.data);
                            this.$router.push('/admin');
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        }
    }

取session

{{$getSessionStorage('users').username}}

session操作工具函数(main.js)

//向sessionStorage中存储一个JSON对象
function setSessionStorage(keyStr, value) {
    sessionStorage.setItem(keyStr, JSON.stringify(value));
}
Vue.prototype.$setSessionStorage = setSessionStorage;

//从sessionStorage中获取一个JSON对象（取不到时返回null）
function getSessionStorage(keyStr) {
    var str = sessionStorage.getItem(keyStr);
    if (str == '' || str == null || str == 'null' || str == undefined) {
        return null;
    } else {
        return JSON.parse(str);
    }
}
Vue.prototype.$getSessionStorage = getSessionStorage;

//从sessionStorage中移除一个JSON对象
function removeSessionStorage(keyStr) {
    sessionStorage.removeItem(keyStr);
}
Vue.prototype.$removeSessionStorage = removeSessionStorage;