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里面的token
    config.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，默认为false
            secure: true,
            //允许跨域
            changeOrigin: true,
          }
        }
      },