vue项目组件的安装与配置

一、element-plus

1、安装 element-plus

npm install element-plus --save

2、引入 Element Plus

在main.ts中引入

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";

import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";

const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");

二、sass

1、安装sass

npm install sass sass-loader --save-dev

三、 vue-router

1、安装 vue-router

npm install vue-router@4 --save

2、搭建vue-router模块

在src下创建router目录，并创建index.ts文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const staticRoutes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: () => import("/@/views/layout/index.vue"),
    redirect: "/home",
    meta: {
      title: "首页",
    },
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import("/@/views/home/index.vue"),
        meta: {
          title: "首页",
        },
      },
    ],
  },
  {
    path: "/login",
    name: "login",
    component: () => import("/@/views/login/index.vue"),
    meta: {
      title: "登陆",
    },
  },
  {
    path: "/:pathMatch(.*)",
    redirect: "/",
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: staticRoutes,
});

export default router;

3、引入 vue-router

在main.ts中引入

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount("#app");

四、pinia

1、安装pinia

npm install pinia

2、搭建Pinia模块

在src下创建store目录，并创建index.ts文件

// 引入pinia 并解构出创建pinia的方法
import { createPinia } from 'pinia'

// 创建pinia
const pinia = createPinia();

// 导出pinia
export default pinia

3、引入Pinia

在main.ts中引入

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
import router from "./router";
import pinia from "./stores";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.use(pinia)
app.mount("#app");

五、axios

1、安装axios

npm install axios

2、配置axios模块

在src下创建utils目录，并创建request.ts文件

import axios, { AxiosInstance } from 'axios';
// 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({
	baseURL: https://1923.168.1.1, // 请求地址
	timeout: 50000,
	headers: { 'Content-Type': 'application/json' },
});
// 导出 axios 实例
export default service;

六、js-cookie

1、安装js-cookie

npm install --save  js-cookie

2、配置js-cookie模块

在utils目录下新建storage.ts文件

import Cookies from 'js-cookie';

/**
 * window.localStorage 浏览器永久缓存
 * @method set 设置永久缓存
 * @method get 获取永久缓存
 * @method remove 移除永久缓存
 * @method clear 移除全部永久缓存
 */
export const Local = {
	// 查看 v2.4.3版本更新日志
	setKey(key: string) {
		// @ts-ignore
		return `${__NEXT_NAME__}:${key}`;
	},
	// 设置永久缓存
	set<T>(key: string, val: T) {
		window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 获取永久缓存
	get(key: string) {
		let json = <string>window.localStorage.getItem(Local.setKey(key));
		return JSON.parse(json);
	},
	// 移除永久缓存
	remove(key: string) {
		window.localStorage.removeItem(Local.setKey(key));
	},
	// 移除全部永久缓存
	clear() {
		window.localStorage.clear();
	},
};

/**
 * window.sessionStorage 浏览器临时缓存
 * @method set 设置临时缓存
 * @method get 获取临时缓存
 * @method remove 移除临时缓存
 * @method clear 移除全部临时缓存
 */
export const Session = {
	// 设置临时缓存
	set<T>(key: string, val: T) {
		if (key === 'token') return Cookies.set(key, val);
		window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 获取临时缓存
	get(key: string) {
		if (key === 'token') return Cookies.get(key);
		let json = <string>window.sessionStorage.getItem(Local.setKey(key));
		return JSON.parse(json);
	},
	// 移除临时缓存
	remove(key: string) {
		if (key === 'token') return Cookies.remove(key);
		window.sessionStorage.removeItem(Local.setKey(key));
	},
	// 移除全部临时缓存
	clear() {
		Cookies.remove('token');
		window.sessionStorage.clear();
	},
};

3、解决bug

①、尝试使用 npm i --save-dev @types/js-cookie (如果存在)，或者添加一个包含 declare module 'js-cookie'; 的新声明(.d.ts)文件?

报错原因： 在使用 Typescript 的过程中， 第三方类库并没有ts的.d.ts 类型的声明文件
解决：在src下创建types目录，并创建index.d.ts文件

// 申明外部 npm 插件模块
declare module 'js-cookie';

七、qs

1、安装qs

npm install qs

2、解决bug

①、尝试使用 npm i --save-dev @types/qs (如果存在)，或者添加一个包含 declare module 'qs'; 的新声明(.d.ts)文件?

报错原因： 在使用 Typescript 的过程中， 第三方类库并没有ts的.d.ts 类型的声明文件
解决：在src下创建types目录，并创建index.d.ts文件

// 申明外部 npm 插件模块
declare module 'js-cookie';
declare module 'qs;

八、vue-i18n

1、安装vue-i18n

npm install vue-i18n@9

2、 定义和组合语言包

在src下创建i18n目录，在i18n目录下新建langurage目录，在langurage目录下新建zh.ts 文件和 en.ts文件

zh.ts

// 定义内容
export default {
	router: {
		home: '首页',
		system: '系统设置',
		systemMenu: '菜单管理',
		systemRole: '角色管理',
		},
};

en.ts

// 定义内容
export default {
	router: {
		home: 'home',
		system: 'system',
		systemMenu: 'systemMenu',
		systemRole: 'systemRole',
		},
};

3、搭建vue-i18n模块

在src下创建i18n目录，在i18n目录下新建index.ts文件

import en from './langurage/en';
import zh from './langurage/zh';
import { createI18n } from 'vue-i18n';

// 组合语言包对象
const messages = {
  en,
  zh
}

// 创建并导出实例对象
export const i18n = createI18n({
  legacy: false,  // 设置为 false，启用 composition API 模式
  messages,
  locale: 'en'
})

4、引入vue-i18n

在main.ts中引入

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
import { i18n } from '/@/i18n/index';

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.use(i18n);
app.mount("#app");