搭建vue3+ts+vite+pinia框架

一、搭建准备

• VScode/HBuilder/等任何一种前端开发工具
• node.js&npm&cnpm&yarn本地开发环境

二、安装 vite并创建vue项目

1、安装 vite

npm install create-vite-app -g

2、新建vue项目

npm create vite@latest
√ Project name: ... test
√ Select a framework: » Vue
√ Select a variant: » TypeScript
# 安装依赖
npm install
# 运行
npm run dev

3.配置 vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';

const pathResolve = (dir: string) => {
	return resolve(__dirname, '.', dir);
};

const alias: Record<string, string> = {
	'/@': pathResolve('./src/')
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { alias },
  server:{
    port: 8080, // 端口号g
    open: true, // 运行自动打开浏览器
  }
})

4、解决报错

①、找不到模块“./App.vue”。你的意思是要将 “moduleResolution” 选项设置为 “node”，还是要将别名添加到 “paths” 选项中?

在项目根目录找到tsconfig.json和tsconfig.node.json文件修改moduleResolution值为node

    "moduleResolution": "node"

②、allowImportingTsExtensions报错

原因：该选项用于控制是否允许在 import 语句中导入 .ts 文件扩展名，它的取值可以是 true 或 false。但是，从 TypeScript 3.8 开始，这个选项已经被废弃了
解决方法：删除tsconfig文件中的"allowImportingTsExtensions": true,

③、找不到模块“./App.vue”或其相应的类型声明。

原因：TypeScript编译器不支持处理 .vue 结尾的文件
解决方法：在项目根目录添加 shim.d.ts 文件

// 声明文件，*.vue 后缀的文件交给 vue 模块来处理
declare module '*.vue' {
	import type { DefineComponent } from 'vue';
	const component: DefineComponent<{}, {}, any>;
	export default component;
}

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

解决办法：npm install @types/node --save-dev

三、安装 element-plus并引入

1、安装 element-plus

npm install element-plus --save

2、引入 Element Plus

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 sass-loader

1、安装sass

npm install sass sass-loader --save-dev

五、安装 vue-router-next并配置

1、安装 vue-router-next

npm install vue-router@4 --save

2、搭建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;

在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

在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: import.meta.env.VITE_API_URL, // 请求地址
	timeout: 50000,
	headers: { 'Content-Type': 'application/json' },
});
// 导出 axios 实例
export default service;

在根目录下新建.env.development(本地环境)、.env.production(线上环境)配置axios请求地址

.env.development(本地环境)

# 本地环境
ENV = development

# 本地环境接口地址
VITE_API_URL = http://localhost:8888/

.env.production(线上环境)

# 线上环境
ENV = production

# 线上环境接口地址
VITE_API_URL = https:192.168.1.1  //请求路径

八、安装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();
	},
};