首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Vue3项目实战从零到一
礼貌而已_
创建于2023-10-14
订阅专栏
记录从零到一搭建Vue3项目的详细过程,技术栈采用最新的 Vue3 + Ts +Vite + Pinia,包管理工具使用 pnpm,专栏文章持续更新中~~
等 35 人订阅
共14篇文章
创建于2023-10-14
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
Vue3+Ts+Vite项目(第十五篇)——tailwindcss安装及使用详解,css原子化如何实现
一、装包 npm: pnpm : 二、初始化 2.1 终端执行如下命令 2.2 postcss.config.js 文件中 2.3 tailwind.config.js 文件中 注:此代码参考开源项目
Vue3+Ts+Vite项目(第十四篇)——vue安装vue-i18n配置中英文切换,完成项目国际化
前言 一、 安装 vue-i18n 二、新建文件 2.1 在项目根目录下新建 locales 文件夹,并新建 index.ts、en.ts、zh.ts 三个文件(只做中英文切换) 2.2 在 inde
Vue3+Ts+Vite项目(第十三篇)——自定义Element-Plus主题色图文讲解
概述 找了很多博客,想全局配置Elmenet-Plus组件主题色,但都没有效果。所以我配置成功后,总结了这篇博客,希望能对你有所帮助!!! 一、先看效果 实现对 Elmenet-plus 组件库中组件
Vue3+Ts+Vite项目(第十篇)——el-breadcrumb二次封装,面包屑组件、面包屑过渡动画实现
简介 使用 element-plus 的 el-breadcrumb 组件,实现根据页面路由动态生成面包屑导航,并实现面包屑导航的切换过渡动画 一、先看效果加粗样式 1.1 静态效果 1.2 动态效果
Vue3+Ts+Vite项目(第十一篇)——vue项目启动loading加载效果如何实现?
简介 一分钟实现 vue-pure-admin 同款项目首次加载 loading 效果 一、先看效果 1.1 静态效果 1.2 动态效果 二、上代码 核心代码在body里面,代码中已标明。找到你项目的
Vue3+Ts+Vite项目(第九篇)——el-menu二次封装实现左侧菜单栏组件
图文详解,手把手带你在Vue3+Element-Plus的项目中,将el-menu进行二次封装,实现后台管理系统的左侧导航栏。通过递归实现动态渲染左侧菜单栏
Vue3+Ts+Vite项目(第八篇)——页面切换过渡动画
Vue3+Ts+Vite+Pinian的项目中,配置router切换过渡动画配置详解。解决Component inside renders non-element root node that ca
Vue3+Ts+Vite项目(第七篇)——vue自定义滚动条样式
Vue3+Ts+Vite项目中,如何自定义滚动条样式。调整滚动条样式粗细,长短,颜色等,优化页面显示效果
Vue3+Ts+Vite项目(第六篇)——nprogress安装与使用详解,vue路由加载进度条
一、先看效果 1.1 动态效果 1.2 静态效果 二、安装 nprogress 三、封装 utils 3.1 在 src 下新建 utils 文件夹,在 utils 文件夹下新建 nprogress.
Vue3+Ts+Vite项目(第五篇)——vue-router配置,路由模块化、路由跳转实现
Vue3+TypeScript+Vite项目中,手摸手带你完成在Vue3项目中使用vue-router,并完成vue-router的模块化拆分
Vue3+Ts+Vite项目(第四篇)——配置@路径别名,实现@代替/src
一、根目录下 vite.config.ts 文件中配置 二、根目录下 tsconfig.json 文件中配置 三、使用示例
Vue3+Ts+Vite项目(第三篇)——配置husky、stylelint、commitlint,配置git提交代码校验
简介 一、项目环境 1.1 node.js v16.0.0 及以上 (我 v16.14.1) 1.2 pnpm v8.0.0 及以上(我 v8.6.6) 二、创建项目 2.1 安装 pnpm 2.2
Vue3+Ts+Vite项目(第二篇)——引入Element-Plus并配置组件按需自动导入
一、安装Element-plus 我使用的是 pnpm,并且顺便将 element-plus/icons一起引入 二、配置Volar 支持 如果您使用 Volar,请在根目录下 tsconfig.js
Vue3+Ts+Vite项目(第一篇)——如何使用Vite创建Vue3项目
概述 保姆级详解,带你使用 Vite 创建 Vue3 项目,全程cv即可 一、 安装 Vite 使用 npm: 使用 yarn: 使用 pnpm: 二、 创建项目 2.1 运行上述命令后,会让我们输入