ppt模板下载网址_网络服务器配置设计_西安网络科技有限公司_seo搜索优化怎么做

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参考博客

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