当前位置：首页 > news >正文

vue3 vite创建项目 vite配置、pinia配置

news 来源：原创 2025/5/1 4:57:06

npm create vite@latest
输入名称 创建项目
选择框架
选择JS/ts

在这里插入图片描述

使用Pnpm 安装项目 Pnpm i

或者使用官方创建

pnpm create vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你
将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yesj就可以在创建项目的时候自动添加路由、pinia状态管理 也是使用pnpm管理 vite

常用插件

 pnpm add sass --save-dev  scsspnpm install element-plus  element-plus插件pnpm add nprogress  页面进度lodingpnpm add pinia-plugin-persist  pinia 持久化pnpm add pinia-plugin-persistedstate pinia持久化，推荐这个pnpm add qs  参数转义pnpm add unplugin-auto-import  自动导入pnpm add unplugin-vue-components  自动注册组件i -D unplugin-icons 基于iconify图标支持按需访问上万图标pnpm add axios
pnpm install @wangeditor/editor @wangeditor/editor-for-vue  富文本插件 中文文档

完整vite.config.ts配置

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载
import Components from 'unplugin-vue-components/vite' //按需自动加载import IconsResolver from "unplugin-icons/resolver"
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //引入element ui插件
// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue'],resolvers: [ElementPlusResolver(),IconsResolver({prefix: 'Icon',}),],}),Components({resolvers: [// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],}),ElementPlusResolver()],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),'*': fileURLToPath(''),'ass':fileURLToPath('assets')},},// server:{//   // 服务器主机//   host:true,//   // 端口//   port:7058,//   // 是否自动打开浏览器//   open:true,// }
})

pinia配置

min.ts中配置
import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)app.mount('#app')新建stores目录 自定义一个文件counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import piniaPersistConfig from "@/config/configStore"
export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return { count, doubleCount, increment }
})在app.vue或者其他页面中使用即可，如下配置import { useCounterStore } from '@/stores/counter';
const textsb = useText2Store()
const {count ,increment}=storeToRefs(textsb)页面中使用就可以了{{count }}，或者使用函数increment（），改变当前store

持久化

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useText2Store = defineStore('counter2', () => {const theme = ref('light')const fontSize = ref(14)const isDarkMode = computed(() => theme.value === 'dark')const upThem=(a:string)=>{theme.value=a}return { theme, fontSize, isDarkMode,upThem }}, {persist: [{key: 'text2',pick: ['theme'],storage: localStorage,},{key: 'fontSize',pick: ['fontSize'],storage: localStorage,}]})const textsb = useText2Store()
const {theme}=storeToRefs(textsb)
//d调用store函数改变store数据
textsb upThem("红色") 这样 theme就改变了也就是执行了const upThem=(a:string)=>{theme.value=a} 这个函数

在这里插入图片描述