vue创建万能模板

1.创建vue项目

vue init webpack demo1

2.选择路由其他的都可以不选择

3.在package.json中

start 输入命令
（1）

安装路由模块

npm install vue-router -s

3.2 引入路由模块并使用

import Vue from 'vue'
import App from './App'
import router from './router'   // 引入路由模块
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

路由传参示意图

、

安装vue axios

npm install —save axios vue-axios （save的意思是只做开发用）

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
// 引用的时候注意引用的顺序
Vue.use(VueAxios, axios)

使用Element-UI组件库

npm i element-ui -S

import Vue from 'vue';
import ElementUI from 'element-ui'; //加入
import 'element-ui/lib/theme-chalk/index.css';//加入
import App from './App.vue';

Vue.use(ElementUI);//加入

安装Vuex

cnpm install vuex@3.6.2

main.js

import Vuex from 'vuex'
Vue.use(Vuex);

15.3.2 解决浏览器刷新后 Vuex 数据消失问题

• 问题描述

Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。但是有一个问题就是：vuex 的存储的数据只是在页面的中，相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。

• 解决方案

监听页面是否刷新，如果页面刷新了，将 state 对象存入到 sessionStorage 中。页面打开之后，判断 sessionStorage 中是否存在 state 对象，如果存在，则说明页面是被刷新过的，将 sessionStorage 中存的数据取出来给 vuex 中的 state 赋值。如果不存在，说明是第一次打开，则取 vuex 中定义的 state 初始值。

• 修改代码

在 App.vue 中增加监听刷新事件

 export default {
    name: 'App',
    mounted() {
      window.addEventListener('unload', this.saveState);
    },
    methods: {
      saveState() {
        sessionStorage.setItem('state', JSON.stringify(this.$store.state));
      }
    }
  }

修改 store/index.js 中的 state

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
  user: {
    name: ''
  }
};

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
import VueAxios from "vue-axios"
// 引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入 vuex
import Vuex from 'vuex'
// 引入 store
import store from "./store";

Vue.config.productionTip = false
// 配置axios作用保存session的会话状态
axios.defaults.withCredentials = true
Vue.use(VueAxios, axios)
// 使用ElementUI
Vue.use(ElementUI);
// 使用Vuex
Vue.use(Vuex);

new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})