首页 > 网络编程 > JavaScript > javascript技巧 > 搭建vue3+ts+vite+pinia项目

5分钟快速搭建vue3+ts+vite+pinia项目

2023-05-19 09:49:47 作者：诸葛小愚

本文主要介绍了5分钟快速搭建vue3+ts+vite+pinia项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

最近接到一个新的需求，需要使用Vue3来开发，本着学习的目的，就先来创建一个Vue3项目。既然是学习，那就怎么新怎么来。

本次创建项目需要接触到4个东西：Vue3、TypeScript、vite、pinia，咱们来逐一解释。

作为前端常用三大框架（Vue、React、Angular）之一，Vue在2020年9月18日正式发布了Vue3.0，简称Vue3
JavaScript我们都知道，而Typescript则是JavaScript的超集，即可编译成JavaScript，相当于是在JavaScript上面加了类型约束
vite是一种新型前端构建工具，同样出自尤大之手。使用webpack的可以看看vite，突出一个字：快
pinia可作为vue3项目的数据存储共享，不仅API更加简洁，而且可配合ts使用，更好的实现类型推导

介绍完毕，我们就来开始新建项目。

创建项目

这一次我们使用vite来新建项目，值得注意的是vite需要node版本大于等于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项目也需要像普通vue项目一样配置@别名：

// 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中也配置@别名：

// 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中引入：

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

在组件中使用：

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

配置路由

配置路由一般采用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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！