前端技术社区总目录（订阅之前请先查看该博客）示例效果Pinia简介Pinia是Vue的存储库，它允许您跨组件/页面共享状态。Pinia与Vuex比较（1）Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。（2）pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。（3）无需再创建各个模块嵌套（module），Vuex中如果数据过多，我们通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响。（4）
给自己一个目标，然后坚持一段时间，总会有收获和感悟！在使用vue的过程中，总会遇到一些有疑问的地方，总结就能够加深印象，下次再出现的时候也有个参考的地方。目录一、常见属性二、重复原因三、高阶用法3.1、自定义列模板3.2、自定义表头样式3.3、自定义行样式和操作列3.4、分页和排序3.5、表格合并3.6、自定义空数据提示3.7、自定义加载状态一、常见属性ElementUI的el-table组件是一个强大的表格组件，提供了许多常见的属性来配置和定制表格的外观和行为。【下面是一些常见的el-table属性的介绍】data：表格的数据源，可以是一个数组或者一个接受Promise的函数。columns
解决vite构建库模式和es格式中css样式加载问题（也可单独在组件下引入）1.当使用vite构建库模式或es格式组件，组件样式需单独引入否则组件是没有css样式的@import"/package/subassembly/css/style.css";//挂载组件样式//挂载组件样式注：如果同一个项目使用多个组件，引入的CSS样式名相同会导致CSS样式来回覆盖导致错误2.可以使用vite-plugin-libcss插件（推荐）链接:3.安装//装置npmivite-plugin-libcss-D4.用法//vite.config.jsimportlibCssfrom'vite-plugin-l
想在uniapp和vue3环境中使用echarts是一件相当前卫的事情，官方适配的还不是很好，echarts的使用插件写的是有些不太清晰的，这里我花费了一天的时间，终于将这个使用步骤搞清楚了，并且建了一个仓库，大家可以直接clone下来使用。先看一下pc端和小程序端的效果：微信小程序和抖音小程序等都支持：使用步骤如下第一步：下载插件包下载echarts插件包，并导入到项目中，然后使用插件中的组件创建容器，并导入数据就可以了。echarts插件包地址：echarts-DCloud插件市场如果你是使用hbuilder写的，可以直接导入，如果你是vscode写的，就下载压缩包：我这里将我下载好的zi
项目代码同步至码云weiz-vue3-templateVueRouter是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。1.安装npmivue-router@42.集成1.新建两页面进行示例在src/view下新建home.vue和login.vue，内容如下：defineOptions({name:'V-home'})homepagelogin.vue里修改下对应name即可2.src下新建router文件夹index.ts作为路由入口，static.ts作为静态路由，modules内还可以放入其他类型路由，整体目录结构如下：src|+---
目录前言第一章安装Vite，本篇基于npm进行（请检测自己的node版本）第二章创建项目第三章项目配置第四章项目目录结构划分第五章CSS样式的重置第六章网络请求封装axios第七章状态管理（vuex/pinia）第八章区分开发环境和生产环境前言“学习能力也好，执行力也罢，核心只有一个：在刚开始的时候，平静地接受自己的笨拙。”本篇文章是Vue项目基于Vite初始化的过程，借此记录一下，巩固基础！第一章安装Vite，本篇基于npm进行（请检测自己的node版本）具体可看：Vite官方中文文档npminstall-gcreate-vite-app全局安装vite，可能会出现：npmWARNdepre
本文主要将如何利用搭建一个初始化的商城H5项目框架。初始化阶段使用的技术栈有：vue3.2、vue-router、 TS、Pinia、Vant4、Less、vite1.环境检测： node-v检测是否有安装node.js，未安装请先去官网安装node.js2.创建初始化项目： 终端输入: npm initvite 自定义项目名称projectname：demodemo 依次选择Vue+TypeScript创建项目 启动项目： cddemodemo
项目代码同步至码云weiz-vue3-template要求代码规范，主要是为了提高多人协同和代码维护效率，结合到此项目，具体工作就是为项目配置eslint和prettier。editorconfig安装EditorConfigforVSCode插件，根目录下新建.editorconfig文件，增加以下配置[*.{js,jsx,ts,tsx,vue}]indent_style=spaceindent_size=2end_of_line=crlftrim_trailing_whitespace=trueinsert_final_newline=truemax_line_length=120如果是非
前面几篇文章我们介绍的都是Vite+Vue3+TypeScript项目中环境相关的配置，接下来我们开始进入系统搭建部分。本篇我们来介绍登录界面搭建及动态路由配置，大家一起撸起来......搭建登录界面登陆接口api项目登陆接口是通过mockjs前端来模拟的模拟服务接口LoginApi首先在src/mock文件夹下新建login.ts文件，模拟两个服务接口（验证码获取+用户登录）import{MockMethod}from'vite-plugin-mock';exportconstLoginApi:Array=[{url:'/api/captchaImage',method:'get',resp
参考来源：https://vitejs.dev/blog/announcing-vite5?ref=dailydevVite5.0版本的发布标志着Vite生态系统的又一次重大进步。自Vite4发布近一年以来，它作为生态系统的坚实基础，每周的npm下载量从250万跃升至750万次。各种框架持续创新，像Astro、Nuxt、SvelteKit、SolidStart、QwikCity等不断加入，加强了整个生态系统。RedwoodJS和Remix转向Vite，为React生态系统的进一步采纳铺平了道路。与此同时，Vitest的增长速度甚至超过了Vite本身。其团队正在努力工作，并将很快发布Vitest
