首页 > 其他分享 >【vite+pinia】

【vite+pinia】

时间:2023-03-02 14:24:00浏览次数:33  
标签:npm vue 项目 --- pinia vite

vite

  1. 轻量快速热重载,开发环境中不需要打包操作,可以快速冷启动
    按需编译,不需要等待整个应用编译完成

pinia

  1. 支持vue2和vue3,是vue专属的状态管理库,允许跨组件或者页面
    共享状态
  2. 与vuex相比,pinia提供了更简单的API。最重要的是搭配ts一起使用时有非常可靠的类型推断支持

特点:v2和v3都支持

  1. 抛弃mutation,只有state,getter,action
  2. ts支持
  3. 代码简洁,很好的代码自动分割

VUe-cli:

vue2-3:vue-cli 构建项目

  1. 处于维护模式

使用vite创建项目

  1. npm create vite@latest   ---- 创建项目
  2. √ Project name: ... vite-project  --- 创建项目(起名)
  3. Select a framework: » - Use arrow-keys. Return to submit.     选择项目框架  
              Vanilla
            >   Vue
                React
                Preact
                Lit
                Svelte
                Others
  4. Select a variant: » - Use arrow-keys. Return to submit.   选择语言
            >   JavaScript
                TypeScript
                Customize with create-vue
                Nuxt

cd vite-project     --- 进入项目目录
            npm install         --- 安装项目依赖
            npm run dev         --- 启动项目

--vite 只搭建纯粹的vue 项目,其他比如vuex,router都需要自己安装

安装其他的

  1. --npm install vue-router@4

标签:npm,vue,项目,---,pinia,vite
From: https://www.cnblogs.com/quelan/p/17171630.html

相关文章

  • 使用unplugin-auto-import自动导入插件优化vite开发vue3应用
    为什么要使用unplugin-auto-import插件? 使用vite编写vue3代码时,使用compositionapi函数、VueRouter、pinia状态管理等官方API需要在页面中显式引入。而使用unplug......
  • 拥抱下一代前端工具链-Vue老项目迁移Vite探索
    作者:京东物流邓道远背景描述随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切......
  • Vue3 状态管理之pinia
    什么是Pinia在vue3之前我们最常用的状态管理就是Vuex,当然在vue3中也有相对应的Vuex的版本。但是还是推荐使用Pinia,原因有以下几点:语法简单,mutations不再存在。无......
  • 拥抱下一代前端工具链-Vue老项目迁移Vite探索
    作者:京东物流邓道远背景描述随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换......
  • 学习Pinia
    前言全局状态管理工具Pinia.js有如下特点:完整的ts的支持;足够轻量,压缩后的体积只有1kb左右;去除mutations,只有state,getters,actions;actions支持同步和异步;代码......
  • Vue3 + vite + Ts + pinia + 实战
    Pinia起始于2019年11月左右的一次实验,其目的是设计一个拥有组合式API的Vue状态管理库。从那时起,我们就倾向于同时支持Vue2和Vue3,并且不强制要求开发者使用组......
  • pinia持久化‘pinia-plugin-persist‘
    Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器,更替Vuex4成为Vuex5。 pinia的优点更好的支持vue3和Tsvuedevtools更好的支持pinia支持服务端渲染支持插......
  • vite 打包vue3项目 nginx配置访问 生成dist文件夹文件
    其中一个是,vite项目执行“vitebuild”并部署上线后,在浏览器中访问就会有以下关于路由的奇怪问题:我们用嵌套路由开发的页面生成的路径,个别菜单在初次加载、或者二......
  • vite+vue跨域
    vue3学习中被问到一个问题:怎么解决跨域?在vue之前的web中,解决跨域的问题最常用有效的方法服务器代码中添加Access-Control-Allow-Origin的响应header,告诉浏览器不阻拦当前......
  • vue3 + vite4 + vue-router4动态路由存在的问题
    使用vite4、vue3、vue-router4搭建动态路由的时候遇到的问题及解决方法解决!!我使用的是登录接口返回菜单,使用pinia存储菜单数据,使用pinia-plugin-persist加js-cookie进行......