Vue2基础（6）——vue-cli、element-ui、axios拦截器、proxy接口代理

最新推荐文章于 2025-08-01 10:00:33 发布

番大茄子

最新推荐文章于 2025-08-01 10:00:33 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/SongD1114/article/details/124061353

本文详细介绍了Vue2项目的基础知识，包括使用vue-cli搭建项目，Element-UI组件库的安装与使用，axios拦截器的配置，以及如何通过Proxy解决接口跨域问题。内容涵盖了vue-cli的安装、创建项目、项目仪表盘的使用，Element-UI的引入和组件使用，axios全局配置与拦截器的应用，以及Proxy代理设置。同时，提供了综合案例，演示了结合这些技术实现用户管理功能的步骤。

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币，点赞，收藏呦，历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！https://www.bilibili.com/video/BV1zq4y1p7ga?p=399&spm_id_from=333.1007.top_right_bar_window_history.content.click

1. vue-cli

vue-cli（vue脚手架）是vue官方提供的，快速生成vue工程化项目的工具。

特点：开箱即用、基于webpack、支持vue2和vue3的项目

（1）安装 vue-cli ：一台电脑只需要全局安装一次

注意：5.0.1版本的vue-cli存在一些bug，建议安装低版本 npm install -g @vue/[email protected]

npm install -g @vue/cli

（2）检查 vue-cli 是否安装完成

vue --version

（3）创建项目

第一种方式：基于交互式命令行方式创建vue项目

vue create 项目名称

带(*)的选中状态：<空格>切换选中状态，<a>全部选中，<i>反选
运行项目：npm run serve

第二种方式：基于可视化面板创建vue项目

vue ui的本质：通过可视化面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目，所以创建项目时终端不要关闭。

vue ui

步骤1：点击“创建”按钮-->选择项目的存放路径-->点击“在此创建新项目”按钮
步骤2：在详情页面填写项目名称-->点击“下一步”按钮
步骤3：在预设页面选择“手动”配置炫目-->点击“下一步”按钮
步骤4：在功能页面勾选需要安装的功能（Choose vue version、Babel、css预处理器、使用配置文件）-->点击“下一步”按钮
步骤5：在配置页面勾选vue的版本号（3.x）和需要的预处理器（less）-->点击“创建项目”按钮
步骤6：若为第一次使用ui创建vue项目，选择将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置。若不是第一次，则直接选择“创建项目，不保存预设”。【预设存储到了.vuerc配置文件中，可以在该文件中删除预设。】
步骤7：创建项目并自动安装依赖包。项目创建完成后，自动进入项目仪表盘。

（4）项目仪表盘：

运行项目：在项目仪表盘的任务中，点击serve里的“运行”打包并编译该项目，再点击“启动app”在浏览器中预览该项目。

发布项目：在项目仪表盘的任务中，点击build里的“运行”将项目进行生产环境中的编译，把项目发送给后端程序员，后端程序员就可以对项目进行部署了。

Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/

2. vue2 项目

（1）vue2项目的基本结构

（2）vue2项目中使用路由

在vue2项目中，只能安装并使用3.x版本的vue-router。（版本3和版本4的路由的区别只有创建路由模块的方式不同。）

① 在vue2项目中安装3.x版本的路由。

npm i [email protected] -S

② 在 src-->components 目录下，创建需要使用路由切换的组件。

③ 在src目录下创建 router-->index.js 路由模块。

import Vue from 'vue'                       //1、导入Vue2的构造函数
import VueRouter from 'vue-router'          //2、导入3.x路由的构造函数

import Home from '@/components/Home.vue'    //3、导入需要使用路由切换的组件
import Movie from '@/components/Movie.vue'

Vue.use(VueRouter)                          //4、调用Vue.use()函数，把路由配置为Vue的插件

const router = new VueRouter({              //5、创建路由对象
  routes: [                                 // 声明路由规则
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
  ],
})

export default router                       //6、向外共享路由对象

注意：@ 代表 src 这层源代码目录，当写绝对路径时可以使用！

④ 在 main.js 中导入路由模块，并通过 router 属性进行挂载。

import Vue from 'vue'
import App from './App.vue'
//1、导入路由模块
import router from './router/index.js'

// 不在终端里显示vue的提示消息
Vue.config.productionTip = false

const app=new Vue({
  render: h => h(App),
  //2、挂载路由模块
  router,
})

app.$mount('#app')