Vue项目搭建流程
目录
1、通过命令创建
2、npm下载依赖
3、路由配置
4、配置组件
5、对axios进行二次封装
6、全局接口请求封装
7、配置跨域(反向代理)
1、通过命令创建
create vue 项目名
2、npm下载依赖
nmp i 依赖名@版本号 axios@1.2.1 echarts@5.1.2 element-ui@2.15.12 vue-router@3.6.5
现在vue.config.js中添加 lintOnSave: false, 关闭校验 防止影响后序操作
3、路由配置
先在src下创建views目录，然后创建vue页面，其中一个Main.vue作为父路由，将其他组件按照布局容器进行引入
注意创建的vue页面中必须使用一个div或者其他标签进行包裹，否则会报错
基础页面创建完成，开始搭建路由
在src下创建一个目录router，创建一个index.js文件，进行路由配置
//1、导入依赖
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
//2、引入创建的路由组件
import Home from "../views/Home.vue"
import User from "../views/User.vue"
import Main from "../views/Main.vue"
import ExcelError from "../views/error/ExcelError.vue"
import Login from "../views/Login.vue"
//3、将组件与路由映射
const routes = [{path: '/',component: Main,//重定向name: "home",redirect: "/login",children: [ //子路由 就是在home路径下进行不跳转页面的 内容切换{//首页path: 'home',component: Home,},{path: 'user',component: User,},]}{path: '/login',component: Login,}
]
//4、创建router实例暴露
const router = new VueRouter({routes
})
//添加以下代码
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}
//将5、router暴露
export default router
路由创建完成，此时在main.js中进行全局挂载路由
import Vue from 'vue';
import App from './App.vue';
//重要 要引入vue和css样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// import Cookie from 'js-cookie'
//引入router
import router from './router/index.js';
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({//挂载路由router,render: h => h(App),
}).$mount('#app')
在app.vue中配置路由出口
然后在浏览器访问配置好的路由地址,成功显示页面
当访问组路由时，父路由仍然存在
4、配置组件
对于页面中固定不变的东西要采用组件进行封装，在components文件夹下创建对应的vue文件，作为组件，在指定的vue中进行引入
此时再访问项目，一个基本的后台框架实现
5、对axios进行二次封装
//对axios二次封装
import axios from 'axios'
import Cookie from 'js-cookie'
import router from '../router/index.js'
import ElementUI from 'element-ui';
const request = axios.create({//通用请求地址前缀baseURL:'http://localhost:8081/api',//请求的超时时间timeout: 10000, //统一传递的数据类型contentType: 'application/json',})
//添加请求拦截器
request.interceptors.request.use(function (config){//在请求之前做什么// 请求头携带sessionStorage里面的tokenconfig.headers.Authorization = Cookie.get('token')return config;},function(error){//对错误做点什么return Promise.reject(error);
});
//添加响应拦截器
request.interceptors.response.use(function (response){
var code = response.data.code //获取响应码//对响应数据做点什么if(code == 3003){//未登录 请先登录ElementUI.Message({message: '请先登录',type: 'warning'});router.push("/")}return response;},function (error){//对响应错误做点什么//捕获后端返回的520状态码 --- 当前token不合法//当返回438跳转到登录页面不允许登录console.log(error)//const dataCode = error.response.status// if(dataCode === 438){// //清空token 跳转登录页// Cookie.set("token","");// router.push("/login")// return null// }else if(dataCode == 1010){// //多次请求封锁ip// router.push("/error")// }return Promise.reject(error);
});
export default request
6、全局接口请求封装
在src下创建一个api文件夹，创建index.js文件，用来将对应的接口方法暴露使用
先创建对应业务的js文件
然后在index.js中引入暴露
最后在main.js中引入 并重新封装
此时在对应的请求方法中就可以通过 this.$api.login.方法 来发送接口请求
7、配置跨域(反向代理)
在vue.config.js中配置反向代理解决跨域问题
//配置反向代理// devServer的配置devServer: {// 自定义端口 前端port: 8082,// 自动打开浏览器open: true,// 用于配置反向代理proxy: {// 代理请求， 匹配所有以/apj开头的请求'/api': {// 目标服务器，所有以/api开头的请求接口代理到目标服务器target: 'http://localhost:8081',// 重写路径，此时用于匹配反向代理的/api可以替换为空pathRewrite: { '^/api': '' },// 如果代理到HTTPS服务器需要设置secure为true，默认为falsesecure: true,//允许跨域changeOrigin: true,}}},
