草庐IT

Vue3,Vite3,TS,Naive-UI整合TailwindCSS

目录前言一、环境要求二、创建项目三、安装和使用NaiveUI1、安装NaiveUI2、使用NaiveUI(直接引入)3、使用NaiveUI(自动引入引入)4、使用图标四、安装TailwindCSS五、NaiveUI整合TailwindCSS及遇到的问题前言NaiveUI:一个完全使用TypeScript编写的Vue3组件库,也是Vue作者尤大推荐的Vue组件库。TailwindCSS:能让你少写很多代码的css工具库。本案例使用最新的Vue3,Vite3,TypeScript搭建NaiveUI官网:www.naiveui.comTailwindCSS官网:www.tailwindcss.cn一

Vue3,Vite3,TS,Naive-UI整合TailwindCSS

目录前言一、环境要求二、创建项目三、安装和使用NaiveUI1、安装NaiveUI2、使用NaiveUI(直接引入)3、使用NaiveUI(自动引入引入)4、使用图标四、安装TailwindCSS五、NaiveUI整合TailwindCSS及遇到的问题前言NaiveUI:一个完全使用TypeScript编写的Vue3组件库,也是Vue作者尤大推荐的Vue组件库。TailwindCSS:能让你少写很多代码的css工具库。本案例使用最新的Vue3,Vite3,TypeScript搭建NaiveUI官网:www.naiveui.comTailwindCSS官网:www.tailwindcss.cn一

使用Vite快速构建Vue3+ts+pinia脚手架

一、前言vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波。vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!!vue2+webpack的时代要过去了,主要是启动时间太慢了。所以还是比较推荐使用Vite进行构建,vue3官方也是推荐的!!速度快,基本上是秒启动级别的!带的例子还是vue3最新的组合式语法糖setup。二、vite介绍和搭建1.介绍Vite官网Vite是一个轻量级的、速度极快的构建工具,对VueSFC提供第一优先级支持。作者是尤雨溪,同时也是Vue的作者!Vite3需要Node.js版本14.18+,1

使用Vite快速构建Vue3+ts+pinia脚手架

一、前言vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波。vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!!vue2+webpack的时代要过去了,主要是启动时间太慢了。所以还是比较推荐使用Vite进行构建,vue3官方也是推荐的!!速度快,基本上是秒启动级别的!带的例子还是vue3最新的组合式语法糖setup。二、vite介绍和搭建1.介绍Vite官网Vite是一个轻量级的、速度极快的构建工具,对VueSFC提供第一优先级支持。作者是尤雨溪,同时也是Vue的作者!Vite3需要Node.js版本14.18+,1

【uniapp&微信小程序】vue3+ts+vite+pinia+eslint+prettier+husky项目搭建

前言        【uniapp微信小程序系列】将持续更新分享使用uniapp开发小程序的干货文章。本篇文章是从0搭建uniapp项目,如果是个人项目或者公司无代码规范等,可以参考本篇vue3+ts+vite+pinia搭建项目,如果有规范要求,或者想接入规范,那么本篇文章将从0搭建vue3+ts+vite+pinia项目,并接入代码规范eslint+prettier,及代码提交钩子husky配置。一.创建项目    uniapp官网提供了多个版本下载方式,这里我们选择Vue3/Vite版,创建以typescript开发的工程:npxdegitdcloudio/uni-preset-vue#

【uniapp&微信小程序】vue3+ts+vite+pinia+eslint+prettier+husky项目搭建

前言        【uniapp微信小程序系列】将持续更新分享使用uniapp开发小程序的干货文章。本篇文章是从0搭建uniapp项目,如果是个人项目或者公司无代码规范等,可以参考本篇vue3+ts+vite+pinia搭建项目,如果有规范要求,或者想接入规范,那么本篇文章将从0搭建vue3+ts+vite+pinia项目,并接入代码规范eslint+prettier,及代码提交钩子husky配置。一.创建项目    uniapp官网提供了多个版本下载方式,这里我们选择Vue3/Vite版,创建以typescript开发的工程:npxdegitdcloudio/uni-preset-vue#

Vue3动态路由(Vite+Vue3+TS+Mock)

一、动态路由简介Vue通过路由进行页面管理,不同的路由绑定到不同的页面。一般来说,前端直接写好的路由为静态路由,在不修改代码的情况下,路由表是不会改变的。对于不需要动态改变路由表的网站,静态路由就已经足够了,但是当页面需要与权限进行绑定时,不同用户允许浏览的页面是不一样的,在这种情况下,静态路由就难以满足需求了。动态路由就是由后端根据场景生成的合适路由数据,前端获取此数据并进行解析,最后与固定不变的静态路由组合而成的路由。本文将基于Vite+Vue3+TypeScript构建的Vue项目与mock模拟的后端接口,简单介绍Vue的动态路由配置。此项目代码已上传至GitHub,链接如下:https

Vue3动态路由(Vite+Vue3+TS+Mock)

一、动态路由简介Vue通过路由进行页面管理,不同的路由绑定到不同的页面。一般来说,前端直接写好的路由为静态路由,在不修改代码的情况下,路由表是不会改变的。对于不需要动态改变路由表的网站,静态路由就已经足够了,但是当页面需要与权限进行绑定时,不同用户允许浏览的页面是不一样的,在这种情况下,静态路由就难以满足需求了。动态路由就是由后端根据场景生成的合适路由数据,前端获取此数据并进行解析,最后与固定不变的静态路由组合而成的路由。本文将基于Vite+Vue3+TypeScript构建的Vue项目与mock模拟的后端接口,简单介绍Vue的动态路由配置。此项目代码已上传至GitHub,链接如下:https

源码共读 | 为 vite 项目自动添加 eslint 和 prettier

前言Vite是一个用于现代JavaScript应用程序的快速、轻量级的构建工具,其设计目的是易于使用和适用于大型项目。Vite-pretty-lint是一个插件,可以在基于Vite的项目中安装和配置,以便在编写代码时能够自动对代码进行格式化和检查代码。这可以帮助开发人员在开发过程的早期捕获格式化和链接错误,并确保代码库遵循一致的样式。学习目标:如何为vite项目自动添加eslint和prettier它的原理是什么资源:源码地址:vite-pretty-lint如何使用创建一个vite项目:npminitvite进入项目文件夹下,安装Vite-pretty-lint:npminitVite-pr

源码共读 | 为 vite 项目自动添加 eslint 和 prettier

前言Vite是一个用于现代JavaScript应用程序的快速、轻量级的构建工具,其设计目的是易于使用和适用于大型项目。Vite-pretty-lint是一个插件,可以在基于Vite的项目中安装和配置,以便在编写代码时能够自动对代码进行格式化和检查代码。这可以帮助开发人员在开发过程的早期捕获格式化和链接错误,并确保代码库遵循一致的样式。学习目标:如何为vite项目自动添加eslint和prettier它的原理是什么资源:源码地址:vite-pretty-lint如何使用创建一个vite项目:npminitvite进入项目文件夹下,安装Vite-pretty-lint:npminitVite-pr