vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起,但之后的 v2 版本便比较独立,vite 不仅支持 vue,还支持 React.Preact.Vanilla 等前端库. 由于 vite 出现的时间不是很久,基于 vite 创建的项目没有 vue-cli 那么完整,如果要使用 vue 全家桶.ESLint 等,还需要开发人员手动添加和配置,步骤稍…
集成vue-router 使用yarn yarn add vue-router@next --save 安装完成之后在src目录下创建文件夹router/index.ts,创建完成之后需要在Vue-Router中对Vue-Router进行初始化配置.我们暂时把初始化的工作搁置一下,先需要创建pages文件夹,把需要展示的页面创建完成. 创建完成之后,接下来就是完善router/index.ts中文件的初始化工作了: import { createRouter, createWebHashHist…
vite+vue3+typescript搭建项目过程   vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vuejs.org/guide/introduction.html#getting-started Element对vue3支持--Element Plus官网地址:https://element-plus.gitee.io/#/zh-CNgithub地址:https://github.com/eleme…
theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被打造出来的吗? 读完这篇文章你将学会: 如何使用pnpm搭建出一个menorepo环境 如何使用vite搭建一个基本的Vue3脚手架项目 如何开发调试一个自己的UI组件库 如何使用vite打包并发布自己的UI组件库 作为一个前端拥有一个属于自己的UI组件库是一件非常酷的事情.它不仅能让我们对组件的原…
vite 初始化项目 使用npm npm init vite@latest 使用yarn yarn create vite 使用pnpm pnpx create-vite 根据提示输入项目名称,选择vue框架,选择vue-ts,然后根据提示 cd <project name> npm install / yarn npm run dev / yarn dev 这样就可以看到初始页面了…
pinia的简介和优势: Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库.在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia.那先来看看Pinia比Vuex好的地方,也就是Pinia的五大优势. 可以对Vue2和Vue3做到很好的支持,也就是老项目也可以使用Pinia. 抛弃了Mutations的操作,只有state.getters和actions.极大的简化了状态管理库的使用,让代码编写更加容易直观. 不需要嵌套模块,符合Vue3的Composition api…
这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会构建失败.于是我试着运行一些早期开源的 vue 项目,比如vue-element-admin 管理系统,发现会提示 "'vue-cli-service' 不是内部或外部命令,也不是可运行的程序或批处理文件" . 所以一些已上线项目在构建过程中很可能会出现类似的提示,最直接粗暴的解决办法就是…
在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风格 -- 通过 el-icon-xxx 的方式使用图标(如果有问题的朋友可以先阅读前面的文章:基于 Vite 创建 vue3 全家桶项目). 在真实的企业级开发中,Element Plus 内置的图标通常很难满足业务需求,项目中需要引入大量的 SVG 图标资源,本文描述如何在 Vue3 + Vite2 环境中…
本篇文章主要目的就是想告诉我身边,正在学 vue3 或者 准备学 vue3 的同学,vue3中网络请求axios该如何使用,防止接触了一点点 vue3 的同学会有个疑问?生命周期.router .vux使用都改变了,那 axios 使用有没有啥改变? 小姐姐 使用 axios 之前,需要先安装好. yarn add axios npm install axios bower install axios <script src="https://unpkg.com/axios/dist/ax…
缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊! 从 2019 年到 2021 年,空闲时间里陆陆续续做了一些开源项目,推荐给大家啊!记得点赞和收藏噢!借着这次机会,也盘点一下近期维护的开源项目. 实战项目盘点之 newbee-mall (Spring Boot ) newbee-mall 项目的开源地址: in GitHub:https://github.com/newbee-ltd/newbee-mall in Gitee:https://gi…