Vue3+TS+Vite+Pinia项目初始化与配置指南

近期接到一项基于Vue3开发的新任务，出于学习目的，决定从头创建一个Vue3项目。既然是为了学习新技术，那就采用最新的技术栈进行构建。

本次项目创建涉及四个核心技术：Vue3、TypeScript、Vite以及Pinia，下面将逐一进行解析。

作为前端主流三大框架之一，Vue在2020年9月18日正式发布了Vue3.0版本，通常简称为Vue3。
JavaScript是广泛使用的脚本语言，而TypeScript是其超集，能够编译为JavaScript。它在JavaScript的基础上增加了类型约束，提升了代码的可维护性。
Vite是由Vue作者尤雨溪开发的一种新型前端构建工具。对于习惯使用Webpack的开发者来说，Vite最大的优势在于其极速的开发服务器启动和热更新速度。
Pinia是Vue3项目的推荐状态管理库，用于数据共享。相比Vuex，Pinia的API更加简洁，并且原生支持TypeScript，能提供更好的类型推导体验。

介绍完相关技术栈后，接下来开始实际新建项目的操作。

创建项目

本次使用Vite来初始化项目。需要注意的是，Vite要求Node.js版本大于等于12.0.0，若Node版本过低，可能会导致Vite无法正常运行。

npm install -g yarn // vite项目创建方式有很多，我们采用yarn，如果没有则需要全局安装
yarn create vite my-vue-app --template vue-ts // 创建vite项目，并指定采用vue3+ts的项目模板
cd my-vue-app
yarn // 安装依赖
yarn dev // 运行

运行结果：

创建项目

至此，一个基础的Vite项目已经创建完成，但后续还需要进行必要的配置。

配置

配置@别名

在项目中访问静态资源时，通常建议使用项目路径方式，这样不仅代码更简洁易读，还能避免路径修改时出现错误。Vite项目同样需要配置@别名，具体配置如下：

// vite.config.ts
...
import * as path from 'path'
import { resolve } from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //设置别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
})

由于项目采用TypeScript开发，因此还需要在tsconfig.json中配置@别名，以确保TypeScript编译器能正确解析路径：

// tsconfig.json
{
  "compilerOptions": {
    ...
    "skipLibCheck": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 模块名到基于 baseUrl的路径映射的列表。ts文件中使用@
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置pinia

在Vue3项目中，我们使用Pinia替代Vuex进行状态管理。首先执行安装命令：

yarn add pinia
yarn add pinia-plugin-persist // pinia数据持久化

接着在src文件夹下创建store/index.ts文件：

// src/store/index.ts
import {defineStore} from 'pinia';
import {createPinia} from 'pinia';
import piniaPersist from 'pinia-plugin-persist';
interface GlobalState {
  token: string,
  userInfo: any
}
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({
  id: 'GlobalState', // id: 必须的，在所有 Store 中唯一
  // state: 返回对象的函数
  state: (): GlobalState => ({
    token: '',
    userInfo: {}
  }),
  getters: {},
  actions: {
    // 不使用箭头函数
    setToken(token: string) {
      this.token = token;
    },
    setUserIngo(userInfo: any) {
      this.userInfo = userInfo;
    }
  },
  // 持久化
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'GlobalState',
        storage: localStorage,
        // storage: sessionStorage,
      }
    ]
  }
});
const pinia = createPinia();
pinia.use(piniaPersist);
export default pinia;

然后在main.ts中引入Pinia实例：

...
import store from "@/store/index";
const app = createApp(App);
app.use(store);

在组件中使用Pinia的方式如下：

<script setup lang="ts">
import {GlobalStore} from '@/store'
const global = GlobalStore();
</script>
<template>
    <div>{{global.token}}</div>
</template>

配置less，并定义全局less变量

首先安装less和less-loader依赖：

npm i less less-loader

随后需要在vite.config.ts中配置CSS预处理器，具体配置如下：

export default defineConfig({
  ...
  css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        additionalData:  `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
        javascriptEnabled: true,
      }
    }
  }
})

这里默认加载global.less文件中的样式，因此需要创建该文件：

// src/assets/style/global.less
@primary-color: #5878e2; // 主题色

最后在main.ts中引入该全局样式文件：

import "./assets/style/global.less";

在组件中使用时，即可直接应用定义的全局变量：

<script setup lang="ts">
import {GlobalStore} from '@/store'
const global = GlobalStore();
</script>
<template>
    <div>{{global.token}}</div>
</template>
<style scoped>
div {
    color: @primary-color; // 主题色
}
</style>

配置路由

Vue3项目中通常使用vue-router来管理路由。

yarn add vue-router

新建src/router/index.ts文件：

//  src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const HelloWorld = () => import("@/components/HelloWorld.vue");
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "index",
    meta: {
      title: "首页",
    },
    component: HelloWorld,
  },
  {
    path: "/helloworld",
    name: "helloworld",
    meta: {
      title: "helloworld",
    },
    component: HelloWorld,
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

然后在main.ts中引入router实例：

import router from './router'app.use(router)复制代码

总结

关于5分钟快速搭建vue3+ts+vite+pinia项目的介绍到此结束，更多相关搭建vue3+ts+vite+pinia项目内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

5分钟快速搭建Vue3+TypeScript+Vite+Pinia项目

创建项目

配置

配置@别名

配置pinia

配置less，并定义全局less变量

配置路由

总结

实用工具推荐