您现在的位置是:首页 >技术教程 >使用vue2+elementui+vuex等搭建一个前端的项目框架,包括路由处理和axios的封装网站首页技术教程

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

smouns_ 2023-05-15 08:00:01
简介使用vue2+elementui+vuex等搭建一个前端的项目框架,包括路由处理和axios的封装

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

Axios是一个基于Promise的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 => {
    // 在请求发送之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    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')

这会将Vue Router、Vuex和Axios集成到Vue项目中。

现在,我们已经成功地搭建了一个前端的项目框架,包括路由处理和Axios的封装。我们可以在此基础上进行开发,实现我们想要的功能。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。