【vite创建项目】

一、安装vite并创建项目

  1. node版本>=18
  2. npm 的安装
npm install create-vite-app -g

1、用vite构建项目

npm create vite@latest

在这里插入图片描述

2、配置vite

在这里插入图片描述

3、找不到模块 “path“ 或其相对应的类型声明。

npm install @types/node --save-dev

二、安装element-plus

1、安装element-plus

npm install element-plus --save

2、引入框架

在这里插入图片描述

三、安装sass sass-loader

1、安装sass

npm install sass sass-loader --save-dev

四、安装vue-router-next 路由

1、安装vue-router@4

npm install vue-router@4 --save

2搭建router模块

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

在这里插入图片描述
在mian.ts中引入

在这里插入图片描述

五、Pinia

1、安装pinia

npm install pinia

2、搭建模块

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

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

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

// 导出pinia
export default pinia

在main.ts中引入
在这里插入图片描述

六、安装axios

1、axios

npm install axios

2、在src下创建utils目录,并创建requerst.ts文件

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

七、创建环境

1、.env.development

# 本地环境
ENV=development

#接口地址
VIP_API_URL=http://localhost:8080/

2、.env.production

# 线上环境
ENV=production

# 线上环境接口地址
VIP_API_URL=https://api.vip.com

八、安装js-cookie

1、js-cookie

npm install --save  js-cookie

2、配置模块

在utils下创建storage.ts文件

import Cookies from 'js-cookie';

/**
 * window.localStorage 浏览器永久缓存
 * @method set 设置永久缓存
 * @method get 获取永久缓存
 * @method remove 移除永久缓存
 * @method clear 移除全部永久缓存
 */
export const Local = {
    setKey(key:sring) {
       return `${__NEXT_NAME__}:${key}`;
    },
    // 设置永久缓存
    set<T>(key:string, value:T) {
      window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
    },
    // 获取永久缓存
    get(key:string) {
        let json = <sttring>window.localStorage.getItem(Local.setKey(key));
        return json ? JSON.parse(json) : null;
    },
    // 移除永久缓存
    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();
	},
};```

相关推荐

  1. vite 创建 react 项目

    2024-07-10 22:16:04       37 阅读
  2. 创建项目模板:vite+vue2+eslint

    2024-07-10 22:16:04       13 阅读

最近更新

  1. C语言:再探C语言指针

    2024-07-10 22:16:04       0 阅读
  2. 安卓开发使用seekBar改变ImageView中图片的色彩

    2024-07-10 22:16:04       0 阅读
  3. matlab中feval()的用法

    2024-07-10 22:16:04       0 阅读
  4. 【Linux常用命令】之mkdir命令

    2024-07-10 22:16:04       0 阅读
  5. 在 macOS 上使用 Jadx 进行 APK 反编译

    2024-07-10 22:16:04       0 阅读
  6. C++生成随机数的两种方法

    2024-07-10 22:16:04       0 阅读

热门阅读

  1. mac上修改jupyterlab工作目录

    2024-07-10 22:16:04       9 阅读
  2. mongoexport导出聚合查询的mongo数据

    2024-07-10 22:16:04       7 阅读
  3. k8s离线安装单节点elasticsearch7.x

    2024-07-10 22:16:04       8 阅读
  4. d3tree树控件,点击动态加载,默认展开三层

    2024-07-10 22:16:04       7 阅读
  5. ontape备份异机还原的样例

    2024-07-10 22:16:04       7 阅读
  6. [PaddlePaddle飞桨] PaddleSpeech语言小模型部署

    2024-07-10 22:16:04       7 阅读
  7. vivado DQS_BIAS

    2024-07-10 22:16:04       7 阅读
  8. PHP框架详解-symfony框架

    2024-07-10 22:16:04       8 阅读
  9. 深入理解UTF-8 Encoding在C#中的应用与异常处理

    2024-07-10 22:16:04       9 阅读
  10. Linux 常用命令 - mkdir【创建新目录】

    2024-07-10 22:16:04       9 阅读