vscode使用npm安装element-UI并添加router路由-Toy模板网

这篇具有很好参考价值的文章主要介绍了vscode使用npm安装element-UI并添加router路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

npm安装vue，添加淘宝镜像-CSDN博客

elementUI安装与配置

安装可以看我上一篇文章

vscode控制台输入指令

npm i element-ui -S

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

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

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

下面是项目常用的结构

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

安装完成后需要启用elementUI

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

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

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

这里就以welcome.vue为例

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

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

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

router路由安装

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

Vue Router | Vue.js 的官方路由

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

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

我这里还是指定版本安装

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

安装成功

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

router使用

创建路由文件

src/router文件

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

创建路由index.js

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

在main.js中添加路由

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

最后配置welcome的路由路径

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

启动服务

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

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

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

打开成功就ok了

axios安装

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

npm install axios

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

前端拦截器

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

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

request.js内容如下文章来源地址https://www.toymoban.com/news/detail-816294.html

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;

到了这里，关于vscode使用npm安装element-UI并添加router路由的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！