第六步 Vue2 集成全家桶 vue-router vuex a

2023-08-21  本文已影响0人  _Bell_

介绍

安装

项目根目录下打开终端或命令行工具，运行以下命令来安装相关依赖包：

npm install vue-router@3.0.1 vuex@3.0.1 axios element-ui --save

vue-router

1. 在 src/ 目录下新建 views 目录。在此目录中新建一个名为 404.vue 的文件，并添加以下内容：
<template>
  <div class="error">
    <div class="imgWrapper">
      <img src="@img/errorPages/404.png" alt="404">
    </div>
  </div>
</template>

<style lang="less" scoped>
  .error {
    display: grid;
    place-items: center;
    height: 100vh;
  }
</style>

404.png 图片如果未添加会编译报错，找一张图片放上去或者删除图片放入自己的文字即可。

2. 在 src/ 目录下找到并打开 App.vue 文件，用以下内容直接覆盖现有内容：
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<router-view> 是 Vue Router 提供的组件，用于在 Vue 应用中展示当前路由对应的组件内容。它作用类似于一个占位符，它定义了一个容器，在路由切换时，会根据不同的路由匹配，动态渲染对应的组件内容。

3. 在 src/ 目录下新建 router 目录。在此目录中新建一个名为 index.js 的文件，并添加以下内容：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const pages = [
  {
    path: '/home',
    component: (resolve) => require(['@/components/HelloWorld.vue'], resolve)
  },
  {
    path: '/errorPage/404',
    component: (resolve) => require(['@/views/404.vue'], resolve)
  }
]

const router = new VueRouter({
  routes: [
    // 默认路由
    {
      path: '/',
      redirect: '/home'
    },
    // 页面路由
    ...pages,
    // 没有匹配的路由重定向到404页面
    {
      path: '*',
      redirect: '/errorPage/404'
    }
  ]
})

// 路由跳转前
router.beforeEach((to, from, next) => {
  // 可用于拦截导航并执行一些操作，例如验证用户身份、权限控制等。
  next()
})

// 路由跳转后
router.afterEach((to, from) => {
  window.scrollTo(0, 0) // 每次路由改变滚动条都回到顶部
})

export default router

这段代码是一个基于Vue Router的路由配置。

以下是对代码的解释：

4. 打开 src/main.js 文件，挂载到Vue实例：
import router from './router'

new Vue({
  router
})

修改后的代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@css/index.less'

// 禁用生产环境提示
Vue.config.productionTip = false

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

vuex

1. 在 src/ 目录下新建 store 目录。在此目录中新建一个名为 index.js 的文件，并添加以下内容：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 本地存储-修改
const storageSet = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value))
}

// 本地存储-获取
const storageGet = (key) => {
  return JSON.parse(localStorage.getItem(key))
}

export default new Vuex.Store({
  // 数据源 使用：this.$store.state.xxx
  state: {
    user: {} // 用户信息
  },
  // 派生数据 使用：this.$store.getters.xxx
  getters: {
    // 获取当前-用户对象
    GET_USER(state) {
      state.user = storageGet('STORE_USER') || {}
      return state.user
    }
  },
  // 更改数据-同步 使用：this.$store.commit('xxx', data)
  mutations: {
    // 保存当前-用户对象
    SET_USER(state, data) {
      state.user = data
      storageSet('STORE_USER', data)
    }
  },
  // mutations装饰器-异步
  actions: {
  }
})

这段代码是一个基于 Vue 和 Vuex 的状态管理工具的配置。以下是对代码的解释：

2. 打开 src/main.js 文件，挂载到Vue实例：
import store from './store'

new Vue({
  store
})

修改后的代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@css/index.less'

// 禁用生产环境提示
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

axios

在 src/目录下新建 api 目录。在此目录中新建一个名为 index.js 的文件，并添加以下内容：

import Vue from 'vue'
import axios from 'axios'

// 设置超时时长
axios.defaults.timeout = '60000'

// request拦截器
axios.interceptors.request.use((config) => {
  return config
}, (error) => {
  return Promise.reject(error)
})

// responese拦截器
axios.interceptors.response.use((res) => {
  return res
}, (error) => {
  return Promise.reject(error)
})

/**
 * 设置请求header
 * @param {Object} headers
 */
const setHeader = (headers) => {
  for (const key in headers) {
    axios.defaults.headers[key] = headers[key]
  }
}

/**
 * POST请求
 * @param {String} url 地址
 * @param {Object} params 参数
 * @param {Object} headers headers
 */
export const methodPost = (url, params, headers = {}) => {
  return new Promise((resolve, reject) => {
    setHeader(headers)
    axios.post(url, params).then((response) => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

/**
 * 文件上传
 * @param {String} url 地址
 * @param {File} file 文件
 */
export const methodUpload = (url, file) => {
  return new Promise((resolve, reject) => {
    const formData = new FormData()
    formData.append('file', file)
    formData.append('currentDate', Date.now())
    axios.post(url, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then((response) => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

这段代码是一个配置了axios 网络请求库的请求拦截器和响应拦截器，以及一些封装的请求方法。
以下是对代码的解释：

这些封装的请求方法可以方便地在应用中进行网络请求，并对请求和响应进行统一的处理。

通过下面的方式便可引入调用：

import { methodPost } from '@/api'

methodPost('接口地址', {}).then((res) => {
  // 请求成功
}).catch((err) => {
  // 请求失败
})

element-ui

1. 打开 src/main.js 文件，挂载到Vue实例：
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

// Element挂载到Vue
Vue.$message = Element.Message
Vue.use(Element)

修改后的代码如下：

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App.vue'
import router from './router'
import store from './store'
import '@css/index.less'

// 禁用生产环境提示
Vue.config.productionTip = false

// Element挂载到Vue
Vue.$message = Element.Message
Vue.use(Element)

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')
2. 打开之前创建的 src/api/index.js 文件，找到以下代码块：
// responese拦截器
axios.interceptors.response.use((res) => {
  return res
}, (error) => {
  return Promise.reject(error)
})

在添加 Vue.$message.error(error.toString())代码, 如下：

// responese拦截器
axios.interceptors.response.use((res) => {
  return res
}, (error) => {
  Vue.$message.error(error.toString())
  return Promise.reject(error)
})

这样响应时的错误信息就能通过 Element 的 Message 组件来显示了。

更多组件的使用方式，可到 element-ui 官方文档 中查看。


框架搭建整体流程

点击下载步骤 1-7 配置完成的完整 Demo

上一篇下一篇

猜你喜欢

热点阅读