快捷導(dǎo)航

5分鐘快速搭建vue3+ts+vite+pinia項(xiàng)目

更新時(shí)間：2023年05月19日 09:49:46 作者：諸葛小愚

本文主要介紹了5分鐘快速搭建vue3+ts+vite+pinia項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

作為前端常用三大框架（Vue、React、Angular）之一，Vue在2020年9月18日正式發(fā)布了Vue3.0，簡稱Vue3
JavaScript我們都知道，而Typescript則是JavaScript的超集，即可編譯成JavaScript，相當(dāng)于是在JavaScript上面加了類型約束
vite是一種新型前端構(gòu)建工具，同樣出自尤大之手。使用webpack的可以看看vite，突出一個(gè)字：快
pinia可作為vue3項(xiàng)目的數(shù)據(jù)存儲(chǔ)共享，不僅API更加簡潔，而且可配合ts使用，更好的實(shí)現(xiàn)類型推導(dǎo)

介紹完畢，我們就來開始新建項(xiàng)目。

創(chuàng)建項(xiàng)目

這一次我們使用vite來新建項(xiàng)目，值得注意的是vite需要node版本大于等于12.0.0，如果node版本太低，將會(huì)影響vite的使用。

npm install -g yarn // vite項(xiàng)目創(chuàng)建方式有很多，我們采用yarn，如果沒有則需要全局安裝
yarn create vite my-vue-app --template vue-ts // 創(chuàng)建vite項(xiàng)目，并指定采用vue3+ts的項(xiàng)目模板
cd my-vue-app
yarn // 安裝依賴
yarn dev // 運(yùn)行

運(yùn)行結(jié)果：

這樣我們一個(gè)vite項(xiàng)目就創(chuàng)建好了，但是還沒有結(jié)束。

配置

配置@別名

一般來說我們在項(xiàng)目中訪問靜態(tài)資源時(shí)，都是采用項(xiàng)目路徑的方式，一是看起來更簡潔易懂，另外在修改時(shí)不容易出現(xiàn)路徑問題。vite項(xiàng)目也需要像普通vue項(xiàng)目一樣配置@別名：

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

由于我們將采用typescript來開發(fā)項(xiàng)目，因此需要在tsconfig.json中也配置@別名：

// tsconfig.json
{
  "compilerOptions": {
 ?  ...
 ?  "skipLibCheck": true,
 ?  // 解析非相對模塊名的基準(zhǔn)目錄
    "baseUrl": "./",
 ?  // 模塊名到基于 baseUrl的路徑映射的列表。ts文件中使用@
 ?  "paths": {
 ? ?  "@": ["src"],
 ? ?  "@/*": ["src/*"]
 ?  }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置pinia

在vue3項(xiàng)目中，我們采用pinia來代替vuex，首先是安裝：

yarn add pinia
yarn add pinia-plugin-persist // pinia數(shù)據(jù)持久化

然后在src文件夾下創(chuàng)建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 調(diào)用后返回一個(gè)函數(shù)，調(diào)用該函數(shù)獲得 Store 實(shí)體
export const GlobalStore = defineStore({
  id: 'GlobalState', // id: 必須的，在所有 Store 中唯一
  // state: 返回對象的函數(shù)
  state: (): GlobalState => ({
 ?  token: '',
 ?  userInfo: {}
  }),
  getters: {},
  actions: {
 ?  // 不使用箭頭函數(shù)
 ?  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預(yù)處理器

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

我們這里默認(rèn)加載global.less中的樣式，那么我們就需要?jiǎng)?chuàng)建一個(gè)這樣的文件：

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

最后在main.ts中引入即可：

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

然后在組件中使用時(shí)，就可以直接使用：

<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)復(fù)制代碼

總結(jié)

到此這篇關(guān)于5分鐘快速搭建vue3+ts+vite+pinia項(xiàng)目的文章就介紹到這了,更多相關(guān)搭建vue3+ts+vite+pinia項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: