使用vue2+elementui+vuex等搭建一个前端的项目框架,包括路由处理和axios的封装

本文介绍: 现在，我们已经成功地搭建了一个前端的项目框架，包括路由处理和Ax ios的封装。创建一个名为 store的文件夹，在其中创建一个名为 index.js的文件。创建一个名为 router的文件夹，在其中创建一个名为 index.js的文件。我们需要在Vue项目中引入Elem entUI。创建一个名为 utils的文件夹，在其中创建一个名为 request.js的文件。最后，我们需要在Vue项目中集成以上配置。这会将Ele m entUI注册到Vue中，同时引入Ele m entUI的CSS文件。首先，我们需要创建一个Vue项目。

1. 创建项目

首先，我们需要创建一个Vue项目。打开命令行界面，输入以下命令：

vue create my-project

这会创建一个名为 my–project的Vue项目。接着，进入项目目录：

cd my-project

2. 安装ElementUI

ElementUI是一款基于Vue的UI组件库。我们可以使用 npm来安装它。在命令行中输入以下命令：

npm i element-ui -S

3. 配置ElementUI

我们需要在Vue项目中引入ElementUI。打开 src/main.js 文件，输入以下代码：

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

Vue.use(ElementUI)

这会将ElementUI注册到Vue中，同时引入ElementUI的CSS文件。

4. 安装Vuex

Vuex是Vue的状态管理库。我们可以使用 npm来安装它。在命令行中输入以下命令：

npm i vuex -S

5. 配置Vuex

我们需要在Vue项目中引入Vuex。创建一个名为 store的文件夹，在其中创建一个名为 index.js的文件。输入以下代码：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

这会创建一个Vuex Store实例，并将其导出。

6. 配置路由

我们需要在Vue项目中配置路由。创建一个名为router的文件夹，在其中创建一个名为index.js的文件。输入以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

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

export default router

这会创建一个Vue Router实例，并将其导出。

7. 配置Axios

Axi os是一个基于Promi se的HTTP客户端，用于发送HTTP请求。我们可以使用 npm来安装它。在命令行中输入以下命令：

npm i axios -S

创建一个名为utils的文件夹，在其中创建一个名为request.js的文件。输入以下代码：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config =&gt; {
    // 在请求发送之前做些什么
    return config
  },
  error =&gt; {
    // 对请求错误做些什么
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data
  },
  error => {
    // 对响应错误做些什么
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

这会创建一个Axios 实例，并将其导出。我们可以在其他组件中使用它来发送HTTP请求。

8. 集成

最后，我们需要在Vue项目中集成以上配置。打开 src/main.js文件，输入以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import request from './utils/request'

Vue.config.productionTip = false

Vue.prototype.$http = request

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