vscode使用npm安装element-UI并添加router路由

最新推荐文章于 2025-04-01 15:21:45 发布

逗本逗逗子

最新推荐文章于 2025-04-01 15:21:45 发布

阅读量1.4k

点赞数 12

文章标签： vscode npm ui

本文链接：https://blog.youkuaiyun.com/qq_40452641/article/details/135487391

版权

本文介绍了如何通过npm安装Vue和elementUI，包括设置淘宝镜像，配置elementUI在main.js中的启用，创建和配置Vue路由，以及安装和使用axios并添加前端拦截器的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm安装vue，添加淘宝镜像-优快云博客

elementUI安装与配置

安装可以看我上一篇文章

vscode控制台输入指令

npm i element-ui -S

安装完成后在目录结构打开下图文件

可以看到多了一行elementui就代表安装成功了

下面是项目常用的结构

安装完成后需要启用elementUI

在main.js中配置一下启动项

直接在components目录下新建,vue文件

这里就以welcome.vue为例

要启动welcome.vue还需要配置他的启动路径

router路由安装

要启动还要添加他的路由。否则无法切换页面。

Vue Router | Vue.js 的官方路由

这里在官方文档根据提示安装

我这里还是指定版本安装

安装成功

router使用

创建路由文件

src/router文件

创建路由index.js

在main.js中添加路由

最后配置welcome的路由路径

启动服务

在他给的路径后面加上路由路径

打开成功就ok了

axios安装

这一步顺便装个axios方便以后写请求用

npm install axios

前端拦截器

安装完成后加一个前端拦截器

request.js内容如下

import axios from 'axios'


const $request = axios.create({
    timeout: 10000
});
// 前端拦截器

$request.interceptors.request.use(
    config=>{
        config.headers['Content-Type']='application/json;charset=utf-8';
        return  config;
    },error=>{
        return Promise.reject(error);
    }
);

export default $request;