当前位置：首页 > article >正文

vue项目常见模块的安装及使用

article 2024/10/28 12:08:02

文章目录

nodejs安装及创建vue项目参考文章
element-ui
- element-ui官网
- 安装element-ui
vue-router
- 官网
- 安装vue-router
- vue-router使用
axios
- 官网
- 安装
- 使用axios
- - 简单使用
  - 对请求方法进行加工使用
vuex
- 简介
- 官网
- 安装vuex
- 使用vuex
js-cookie
- 安装
- 使用
qs
- 简介
- 安装
- 使用
- qs特点

nodejs安装及创建vue项目参考文章

nodejs安装及vue项目创建

element-ui

element-ui官网

elementUI

安装element-ui

安装element-ui

npm install element-ui -S

完整引用

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
})

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

vue-router

官网

vuerouter官网：https://v3.router.vuejs.org/zh/installation.html

安装vue-router

npm install vue-router@3 --save

vue-router使用

在src文件夹下新建router文件夹
在router文件夹下新建index.js

import Vue from "vue";
import VueRouter from "vue-router";
import FileList from "@/components/FileList.vue";

Vue.use(VueRouter);
// 创建不同的路由放到routes列表中
const routes = [
    {
    path: '/file',
    name: 'file',
    component: FileList
    }
]
//创建router实例
const router = new VueRouter({
    mode: "hash",
    routes: routes
})
// 向外暴露router
export default router;

axios

官网

axios官网:https://www.axios-http.cn/docs/intro

安装

npm install axios --save

使用axios

简单使用

创建request文件夹
在request文件夹下创建http.js
在使用的地方引入http.js进行发送请求

    import axios from "axios";
    const http =axios.create({
        //通用请求的地址前缀
        baseURL: '/api',
        timeout: 10000, //超时时间
    })

    //添加请求拦截器
    http.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
    },function (error){
        //对请求错误做些什么
        return Promise.reject(error);
    })

    //添加响应拦截器
    http.interceptors.response.use(function (response){
        //对响应数据做点什么
        return response;
    },function (error) {
        //对响应错误做点什么
        return Promise.reject(error)
    })

    export default http

对请求方法进行加工使用

新建libs文件夹
在libs文件夹下新建axios.js
在api模块引用不同的请求方法，进行请求

import axios from 'axios';
import { getStore, setStore } from './storage';
import { router } from '../router/index';
import { Message } from 'view-design';
import Cookies from 'js-cookie';
let base = '/zwz';

axios.defaults.timeout = 15000;
axios.interceptors.request.use(config => {
    return config;
}, err => {
    Message.error('请求超时');
    return Promise.resolve(err);
});

axios.interceptors.response.use(response => {
    const data = response.data;

    switch (data.code) {
        case 401:
            Cookies.set('userInfo', '');
            setStore('accessToken', '');
            if (router.history.current.name != "login") {
                if (data.message !== null) {
                    Message.error(data.message);
                } else {
                    Message.error("未知错误，请重新登录");
                }
                router.push('/login');
            }
            break;
        case 403:
            if (data.message !== null) {
                Message.error(data.message);
            } else {
                Message.error("未知错误");
            }
            break;
        case 500:
            if (data.message !== null) {
                Message.error(data.message);
            } else {
                Message.error("未知错误");
            }
            break;
        default:
            return data;
    }

    return data;
}, (err) => {
    Message.error(err.toString());
    return Promise.resolve(err);
});

export const getRequest = (url, params) => {
    let accessToken = getStore('accessToken');
    return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params,
        headers: {
            'accessToken': accessToken
        }
    });
};

export const postRequest = (url, params) => {
    let accessToken = getStore("accessToken");
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            ret = ret.substring(0, ret.length - 1);
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'accessToken': accessToken
        }
    });
};

export const putRequest = (url, params) => {
    let accessToken = getStore("accessToken");
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            ret = ret.substring(0, ret.length - 1);
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'accessToken': accessToken
        }
    });
};

export const postBodyRequest = (url, params) => {
    let accessToken = getStore('accessToken');
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
            'accessToken': accessToken
        }
    });
};

export const getNoAuthRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params
    });
};

export const postNoAuthRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            ret = ret.substring(0, ret.length - 1);
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
};

vuex

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

官网

vuex官网：https://vuex.vuejs.org/zh/

安装vuex

npm install vuex --save 
//安装过程中可能会因为版本不同进行报错，安装合适版本
npm install vuex@3.6.2 --save

使用vuex

src下新建store文件夹
store文件夹下创建index.js
store文件夹下创建modules文件夹存在模块文件

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';
import user from './modules/user';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
    },
    mutations: {},
    actions: {},
    modules: {
        app,
        user
    }
});
export default store;

创建不同模块文件
app.js

const app = {
    state: {
        menuList: [],
    },
    mutations: {
        updateMenulist(state, routes) {
            state.menuList = routes;
        }
    }
};
export default app;

user.js

import Cookies from 'js-cookie';
const user = {
    state: {},
    mutations: {
        logout () {
            Cookies.remove('userInfo');
            localStorage.clear();
        }
    }
};
export default user;

js-cookie

安装

npm install js-cookie

使用

当前页面使用

import Cookies from "js-cookie";

全局引用
在main.js中引入
设置Vue.prototype.$cookie = Cookies

import Cookies from 'js-cookie'
Vue.prototype.$cookie = Cookies

qs

简介

qs是一个JavaScript库，主要用于查询字符串的解析和序列化。它提供了一些附加安全性的特性，是处理URL查询字符串（如将对象序列化为查询字符串或将查询字符串解析为对象）的理想工具。

安装

npm install qs --save

使用

全局引入
- 在main.js引入qs
- 设置prototype:Vue.prototype.$qs = qs
- this.$qs进行qs使用

import qs from 'qs'
Vue.prototype.$qs = qs
this.$qs

需要的时候引入
- 在需要的地方引入qs

import Qs from 'qs'

qs特点

qs参考博客

qs.parse()：功能：将URL的查询字符串解析成JavaScript对象的形式。
示例：给定查询字符串method=queryTestData&id=12&appToken=123，使用qs.parse()可以将其解析为对象{ method: ‘queryTestData’, id: ‘12’, appToken: ‘123’ }。
qs.stringify()：功能：将JavaScript对象序列化成URL的查询字符串形式，多个键值对之间用&进行拼接。
示例：给定对象{ name: ‘nihao’, age: 30 }，使用qs.stringify()可以将其序列化为查询字符串name=nihao&age=30。

查看全文

http://www.kler.cn/news/368672.html