技术栈为Vite+Vue3 使用tailwindcss搭建一套组件库

项目上初始化

npm create vite@latest my-project -- --template vue cd my-project

npm install -D tailwindcss postcss autoprefixer 

npx tailwindcss init -p //生成tailwindcss的基本配置文件

/** @type {import('tailwindcss').Config}  */ export default { content: [ "./index.html", "./src/**/* .{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

style.css
@tailwind base; @tailwind components; @tailwind utilities;

npm run dev

安装pinia和vue-router

npm install pinia --save //安装pinia

npm install vue-router --save //安装路由

通过vue实例上的use方法注入依赖

第一种写法

import { createApp } from 'vue'
import './assets/style.css'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
const pinia = createPinia()
import "@/store/index"
createApp(App).use(pinia).use(router).mount('#app')

第二种写法（推荐，不用写的长长的一大坨）

import { createApp } from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
app.mount('#app')

安装vue-devtools查看是否注入成功

扩展安装地址 Microsoft Edge 加载项 - vue devtools

pinia的基本使用

pinia的基本概念：state(状态存储) getter(计算属性) action(获取数据的方法)

创建仓库 defineStore

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
const useMainStore = defineStore('main', {

    state: () => {
        return {
            // 所有这些属性都将自动推断其类型
            counter: 0,

        }
    },
    getters: {
        doubleCount: (state) => state.counter * 2,
    },
    actions: {
        increment() {
            this.counter++
        },
        randomizeCounter() {
            this.counter = Math.round(100 * Math.random())
        },
    },


})

export default useMainStore

pinia模块化(创建多个仓库)

import { defineStore } from 'pinia'
import { computed, ref } from "vue"
// 第一个参数是应用程序中 store 的唯一 id
export const useMainStore = defineStore('main', {



    state: () => {
        return {
            // 所有这些属性都将自动推断其类型
            counter: 0,

        }
    },
    getters: {
        doubleCount: (state) => state.counter * 2,
    },
    actions: {
        increment() {
            this.counter++ //this 对应当前main仓库的实列
        },
        randomizeCounter() {
            this.counter = Math.round(100 * Math.random())
        },
    },


})


export const useSetUpStore = defineStore('setupStore', () => {
    const counter = ref(30)
    const getttersCounter = computed(() => {
        return counter.value + 5
    })
    function addCounter() {
        counter.value++
    }

    return { counter, getttersCounter, addCounter }
})

引入仓库

<script setup>
import { useMainStore, useSetUpStore } from "@/store/index" 
//@使路径别名，需要在vite.config.js中定义
const mainStore = useMainStore()
const setUpStore = useSetUpStore()
</script>
<template>
    <div>
        
    </div>
</template>

<style lang="scss" scoped></style>

使用

<script setup>
import { useMainStore, useSetUpStore } from "@/store/index"
const mainStore = useMainStore()
const setUpStore = useSetUpStore()

const { counter } = mainStore
console.log(mainStore.counter)
console.log(mainStore.increment)

console.log(setUpStore)
</script>
<template>
    <input type="button" value="按钮" class="w-6 h-6 bg-blue" @click="mainStore.increment">

    <div>{{ mainStore.counter }}</div>
    <div>{{ counter }}</div>
</template>


<style lang="scss" scoped></style>

仓库地址：github.com/coderFlyHor… 本仓库是一个基于tailwindcss，同时兼容pc和移动端的库（开发中） 学习资料：定义一个 Store | Pinia 中文文档 (web3doc.top) 2.创建vue3项目并安装pinia_哔哩哔哩_bilibili