基于vue3+ts5+vue-router4+pinia2的PC端项目搭建教程

2023-10-20 02:28
文章标签 项目 教程 vue vue3 搭建 pc ts5 router4 pinia2

本文主要是介绍基于vue3+ts5+vue-router4+pinia2的PC端项目搭建教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

导语：在日常开发中，有时候会在项目中引入 ts 来解决一些 js 的问题，下面就简单介绍一下如何使用 vue3+ts+router+pinia 来搭建一个项目。

目录

  • 简介
  • 创建
  • 安装
  • 配置
  • 实战

简介

vue3 目前是常用的 vue 版本，提供了组合式 API 以及一些新的功能和特性；ts 这种类型编程语言可以在编译时通过静态分析检测出很多常见错误，减少了生产环境中的运行时错误，改善了开发体验和效率；vue-router 也更新到了 4 版本，pinia 则是最新退出的替代 vuex 的一个 vue 官方状态管理库；下面就结合以上提到的技术栈组合来简单创建一个项目。

  • vite 官网
  • vuejs 官网
  • ts 官网
  • vue-router 官网
  • pinia 官网

创建

下面打开 cmd 或其他命令行，输入以下命令创建一个 vite 项目。

这里我选择使用pnpm来创建。

  • 创建 vite 项目
pnpm create vite
  • 填写项目信息

包括项目名称、选择框架、js 语言等。

√ Project name: ... tslx
√ Select a framework: » Vue
√ Select a variant: » TypeScript
  • 创建成功

根据以下步骤来安装基本的依赖和运行项目。

cd tslx
pnpm install
pnpm run dev

安装

创建好项目后，接下来安装一些必备的依赖包。

必备依赖包

  • vue-router

这个是必须的，路由管理。

pnpm i vue-router -S
  • sass

这个是必须的，主要是使用 sass 写项目样式表。

pnpm i sass -S
  • axios

这个是必须的，主要是 http 请求数据。

pnpm i axios -S

可选依赖包

  • pinia

这个是可选的，主要是提供状态管理。

pnpm i pinia -D
  • pinia-plugin-persist

这个是可选的，主要是提供状态管理的持久化存储。

pnpm i pinia-plugin-persist -D
  • unplugin-auto-import

这个是可选的，自动导入依赖插件。

pnpm i unplugin-auto-import -D
  • normalize.css

这个是可选的，主要是可定制化 CSS 样式。

pnpm i normalize.css -D
  • mitt

这个是可选的，一个简洁、灵活的 JavaScript 事件订阅和发布库。

pnpm i mitt -D
  • @volar-plugins/vetur

这是可选的，一个支持 vue3 语法的插件。

pnpm i @volar-plugins/vetur -D
  • @vitejs/plugin-vue

这个是可选的，支持基于 Vite 构建的 Vue 项目。

pnpm i @vitejs/plugin-vue -D
  • @types/node

这个是可选的，主要是解决模块的声明问题。

pnpm i @types/node -D
  • path

这个是可选的，主要是 node 的 path 模块。

pnpm i path -D
  • rollup-plugin-visualizer

这个是可选的，主要是应用模块统计。

pnpm i rollup-plugin-visualizer -D
  • vue-i18n

这个是可选的，主要是多语言配置。

pnpm i vue-i18n -D

好了，以上就是日常开发项目常用的一些依赖包。

配置

下面配置一下vite.config.ts文件和main.ts文件以及其他需要配置的文件。

vite 配置文件

打开vite.config.ts文件，主要是添加插件配置，文件路径别名配置，css 全局样式配置，服务端端口及代理配置。

引入依赖
import AutoImport from "unplugin-auto-import/vite";
import vetur from "@volar-plugins/vetur";
import path from "path";
import { visualizer } from "rollup-plugin-visualizer";
插件配置

在plugins中添加以下配置。

//...
{plugins: [vue({template: {compilerOptions: {isCustomElement: () => {return false;},},},}),vetur,AutoImport({dts: "src/auto-import.d.ts",include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue],imports: ["vue","vue-router",{from: "vue-router",imports: ["RouteLocationRaw"],type: true,},],}),visualizer({emitFile: false,filename: "stats.html",open: true,}),];
}
// ...
文件路径别名配置

在src文件夹下面新建三个文件，可以选择去掉assets文件夹。

  • types：主要是存放 ts 声明等内容；
  • styles：主要是存放全局样式文件；
  • apis：主要是存放全局方法文件；

下面是配置方法。

//...
{resolve: {alias: {"@": path.resolve(__dirname, "./src"),"@c": path.resolve(__dirname, "./src/components"),"@t": path.resolve(__dirname, "./src/types"),"@s": path.resolve(__dirname, "./src/styles"),"@a": path.resolve(__dirname, "./src/apis"),},}
}
//...
css 全局样式配置

下面设置 css 全局样式配置，在刚刚创建的styles文件夹下面创建一个global.scss的文件。

// ...
{css: {preprocessorOptions: {scss: {additionalData: '@import "./src/styles/global.scss";',javascriptEnabled: true,},},},
}
//...
服务端端口及代理配置

最后就是一个服务端的配置，包括端口，自动打开网页，跨域接口设置。

//...
{server: {host: "0.0.0.0",port: 6060,open: true,proxy: {"/api": {autoRewrite: true,target: "http://127.0.0.1:9999",changeOrigin: true,ws: true,},},},
}
//...

配置好以后，重启一下服务就生效了。

配置 ts

  • 添加paths路径

在tsconfig.json中新增一个paths属性并配置如下。

{"paths": {"@/*": ["src/*"],"@c/*": ["src/components/*"],"@t/*": ["src/types/*"],"@s/*": ["src/styles/*"],"@a/*": ["src/apis/*"]}
}
  • 完整配置

完整的tsconfig.json内容：

{"compilerOptions": {"target": "ESNext","useDefineForClassFields": true,"module": "ESNext","lib": ["ESNext", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "Node","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }],"paths": {"@/*": ["src/*"],"@c/*": ["src/components/*"],"@t/*": ["src/types/*"],"@s/*": ["src/styles/*"],"@a/*": ["src/apis/*"]}
}

完整的tsconfig.node.json的内容：

{"compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "Node","allowSyntheticDefaultImports": true},"include": ["vite.config.ts"]
}

配置 main.ts

  • 整理main.ts文件

修改为以下内容，这样方便后面挂载全局组件，方法和插件等内容。

import { createApp } from "vue";
import App from "./App.vue";const app = createApp(App);app.mount("#app");
  • vue 组件声明

打开main.ts会看到找不到模块“./App.vue”或其相应的类型声明的报错，下面就在src下面新建一个 vue 声明文件global.d.ts。

// ./src/global.d.ts
declare module "*.vue" {import type { DefineComponent } from "vue";const vueComponent: DefineComponent<{}, {}, any>;export default vueComponent;
}

这个可以让 ts 识别 vue 组件类型声明。

配置 vue-router

下面简单的配置一个路由文件，在src下面新建一个router文件夹，并创建一个index.ts文件。

// ./src/router/index.ts// 导入依赖
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";// 配置routes
const routes: Array<RouteRecordRaw> = [{path: "/",name: "Home",component: () => import("@c/home.vue"),children: [],},{path: "/404",name: "NotFound",component: () => import("@c/404.vue"),meta: {title: "404",auth: false,},},{path: "/:pathMatch(.*)",redirect: "/404",},
];// 配置router
const router = createRouter({history: createWebHistory(),routes,scrollBehavior(to, from) {console.log(to, from);return {left: 0,top: 0,};},
});// 配置钩子
router.beforeEach((to, from, next) => {console.log(to, from);// ...next();
});router.afterEach((to, from) => {console.log(to, from);// window.scrollTo(0, 0);
});// 导出路由
export default router;
  • 导入main.ts文件。
//...
import router from "./router";
// ...
app.use(router);
//...

配置 pinia

在src下面新建一个store的文件夹，里面新建一个index.ts、types.ts以及user.ts的文件。

  • index.ts文件

这个文件主要是放置基础的配置，包括插件，持久化存储。

import { createPinia } from "pinia";
import piniaPluginPerisit from "pinia-plugin-persist";// 全局设置
export const pinia = createPinia();
pinia.use(piniaPluginPerisit);export default pinia;

在配置的时候，pinia-plugin-persist插件可能会报错，原因是找不到模块声明。

可以采取以下方法解决：

  1. 升级到最新版试试看；
  2. 在types目录下新建一个pinia-plugin-persist.d.ts声明文件。

内容为：

declare module "pinia-plugin-persist";
  • types.ts文件

这个文件主要是放置类型变量。

const enum NAMES {user = "USER",
}export default NAMES;

enum可能会报错，Parsing error: The keyword 'enum' is reserved， enum 是 Javascript 为未来特性保留的关键字，我们不应该使用它，属于eslint检查错误。

可以采取以下方法解决：

安装三个插件eslint-plugin-vue、@typescript-eslint/parser、@typescript-eslint/eslint-plugin;

pnpm i eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

修改项目根目录下的.eslintrc.json配置文件；

{"env": {"browser": true,"es2021": true,"node": true,"vue/setup-compiler-macros": true},"extends": ["plugin:vue/vue3-essential","eslint:recommended","prettier","plugin:@typescript-eslint/recommended"],"parser": "vue-eslint-parser","parserOptions": {"ecmaVersion": "latest","sourceType": "module","parser": "@typescript-eslint/parser"},"plugins": ["vue", "prettier"],"rules": {"semi": ["warn", "never"]},"settings": {}
}

重启一下项目就可以了。

  • user.ts文件

这个文件主要是用户的一些状态信息。

import { defineStore } from "pinia";
import NAMES from "./types";
import { User } from "../types/interface";// 用户
const user = defineStore(NAMES.user, {state: () => {return {userInfo: {id: 1,name: "mark",},};},getters: {getUserInfo(state) {return state.userInfo;},},actions: {saveUser(user: User) {this.userInfo = user;},},
});export default user;

上面简单做了个interface的接口定义。

// ./src/types/interface.ts
// 用户信息
export interface User {id: number;name: string;
}
  • 导入main.ts文件。
//...
import pinia from "./store";
// ...
app.use(pinia);
//...

配置 vue-i18n

在src文件夹下面新建locale文件夹，用了存放vue-i18n配置信息。

包括zhCn.ts、zhHk.ts、en.ts、lang.ts、index.ts等文件。

语言内容
  • 中文简体 zhCn
const zhCn = {home: "首页",index: "主页",list: "列表",info: "信息",welcome: "欢迎光临",
};export default zhCn;
  • 中文繁体 zhHk
const zhHk = {home: "首頁",index: "主頁",list: "清單",info: "資訊",welcome: "歡迎光臨",
};export default zhHk;
  • 英文 en
// 英文
const en = {home: "Home",index: "Index",list: "List",info: "Info",welcome: "Welcome",
};export default en;
配置index.ts
  • 导入lang.ts
import zhCn from "./zhCn";
import zhHk from "./zhHk";
import en from "./en";export default {zhCn,zhHk,en,
};
  • 导入index.ts
import { createI18n } from "vue-i18n";
import messages from "./lang";const i18n: any = createI18n({locale: localStorage.getItem("lang") || "zhCn",globalInjection: true,legacy: false,messages,
});export default i18n;
  • tsconfig.json中添加类型
{"compilerOptions": {// ..."types": ["vue-i18n"]}// ...
}
全局引入

在main.ts中引入vue-i18n。

// ...
import i18n from "./locale/index";
// ...
app.config.globalProperties.$i18n = i18n;
// ...
app.use(i18n);

接下来就可以在组件或者其他 ts 文件中使用了。

配置全局样式

在styles文件夹中新建一个font.scss和reset.css样式文件，然后导入main.ts文件中即可实现。

// ./src/main.ts
import "@s/reset.css";
import "@s/font.scss";

配置全局方法

  • http 方法

在apis文件夹中新建一个http.ts文件，封装请求方法。

// ./src/apis/http.ts
import axios from "axios";// 创建axios实例
const http = axios.create({baseURL: "/",timeout: 30000,headers: {"Content-Type": "application/json",},
});// 请求拦截
http.interceptors.request.use((config) => {config.headers.version = "v1";return config;},(err) => {return Promise.reject(err);}
);// 响应拦截
http.interceptors.response.use((res) => {let data = res.data;return data;},(err) => {return Promise.reject(err);}
);export default http;
  • util 方法

在apis文件夹中新建一个util.ts文件，封装请求方法。

// ./src/apis/util.ts
// 全局方法
import { AllAny } from "../types/interface";const sum = (a: number, b: number): number => a + b;const util: AllAny = {sum,
};export default util;

这里我又定义了util的接口。

// 任意对象类型
export interface AllAny {[propsName: string]: any;
}
  • mitt 方法

下面介绍以下如何配置mitt。

在apis文件夹下面新建一个mitts.ts文件。

// ./src/apis/mitts.ts
import mitt, { Emitter } from "mitt";
import { MittEvents } from "../types/interface";const mitts: Emitter<MittEvents> = mitt<MittEvents>();export default mitts;

记得在interface.ts声明以下类型。

// mitt类型
export type MittEvents = {[propsName: string]: any;
};
  • 导入main.ts文件
// ./src/main.ts
// ...
import http from "./apis/http";
import util from "./apis/util";
import mitts from "./apis/mitts";
// ...
app.config.globalProperties.$http = http;
app.config.globalProperties.$util = util;
app.config.globalProperties.$mitts = mitts;
// ...

实战

在项目创建，安装依赖，配置全局环境结束后，写一个简单的组件案例。

组件组成

<!-- 组件模板 -->
<template></template>
<!-- 组件脚本 -->
<script lang="ts" name="Hello"></script>
<!-- 组件样式 -->
<style lang="scss" scoped></style>

小案例

下面是home.vue组件中的一些小案例，可以练习一下。

  • 模板内容
<!-- 计算属性 -->
<p><span>{{ sayHi }}</span>
</p>
<p><button type="button" @click="changeName">改变姓名</button>
</p>

<!-- 路由 -->
<p><button type="button" @click="goNotFound">到404</button>
</p>

<!-- 请求接口 -->
<p><button type="button" @click="getData">请求接口</button>
</p>
<p>接口数据：{{ msg }}</p>

<!-- 全局方法 -->
<p><input v-model="sumInfo.num1" type="number" name="num1" id="num1" placeholder="数字1" />+<input v-model="sumInfo.num2" type="number" name="num2" id="num2" placeholder="数字2" />= {{sumInfo.sum }}
</p>
<p><button type="button" @click="getSum">计算和</button>
</p>

<!-- 发送消息 -->
<p><button type="button" @click="sendMsg">发送消息</button>
</p>
  • 引入依赖
import { reactive, ref, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import userStore from "../store/user";
import { Store } from "pinia";
import { useCurrentInstance } from "../types/util";
import { AllAny } from "../types/interface";
  • 定义数据
// 组件路由
const route = useRoute();
const router = useRouter();
console.log("route:", route, router);// 用户状态
const user: Store = userStore();
console.log("store:", user);// 组件数据
const msg: Ref = ref("");
console.log("data:", msg);const info = reactive({id: 1,name: "mark",
});
console.log("data:", info);const sumInfo = reactive({num1: 0,num2: 0,sum: 0,
});console.log("sum:", sumInfo);
  • 定义方法
// 组件监听
watch(() => [info.name],(val: string[]) => {console.log("watch:", val);}
);// 组件计算
const sayHi = computed(() => {return `Hi,${info.name}!`;
});// 组件当前实例
const { proxy } = useCurrentInstance();
console.log("proxy:", proxy);// 改变姓名
function changeName() {info.name = "jack";
}// 到404
function goNotFound() {router.push("/404");
}// 请求接口
async function getData() {let data: AllAny = await proxy.$http.get("/todos/1");msg.value = data;console.log("http:", data);
}// 计算和
function getSum() {let sum: number = proxy.$util.sum(sumInfo.num1, sumInfo.num2);sumInfo.sum = sum;
}// 发送消息
function sendMsg() {proxy.$mitts.emit("user", "mark");
}

多语言案例

  • 路由使用
import i18n from "../locale/index";
const trans = i18n.global.t;trans("home");
  • 组件使用
import { useI18n } from "vue-i18n";
const { t } = useI18n();console.log(t("welcome"));

以上就是如何从零搭建一个 vue3+ts5+vue-router4+pinia2 的项目方法。

这篇关于基于vue3+ts5+vue-router4+pinia2的PC端项目搭建教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/243981。

相关文章

如何在Spring Boot项目中集成MQTT协议

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅
阅读更多...
springboot项目打jar制作成镜像并指定配置文件位置方式

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》：本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文
阅读更多...
深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制（JDK/CGLIB）、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实
阅读更多...
怎么用idea创建一个SpringBoot项目

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备（JDK1.8+、Maven3.2.5+）、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA，点击New新建一个项
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
如何使用Haporxy搭建Web群集

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.
阅读更多...
SpringBoot连接Redis集群教程

SpringBoot连接Redis集群教程

《SpringBoot连接Redis集群教程》：本文主要介绍SpringBoot连接Redis集群教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 依赖2. 修改配置文件3. 创建RedisClusterConfig4. 测试总结1. 依赖 <de
阅读更多...
springboot项目中整合高德地图的实践

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》：本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一：高德开放平台的使用二：创建数据库（我是用的是mysql）三：Springboot所需的依赖（根据你的需求再
阅读更多...
一文详解如何在idea中快速搭建一个Spring Boot项目

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热
阅读更多...
SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一：基础配置（直接关闭目标路径日志）方案二：结合 Spring Profile 按环境屏蔽关
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2