javascript 使用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的封装。我们可以在此基础上进行开发，实现我们想要的功能。

精彩文章