![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vite2+Vue3+TS+Element-P搭建教程
文章平均质量分 90
Vite2 + Vue3 + TypeScript + Element-Plus脚手架搭建教程
code-bee
这个作者很懒,什么都没留下…
展开
-
16-Vue3 动态路由权限控制
Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列✅01-初始化 Vite 项目✅02-配置 Vite2 环境变量✅03-Vite2 配置及说明✅04-Vue3 使用 SCSS✅05-Vue3 路由配置✅06-TypeScript 配置及说明✅07-Vue3 使用 axios✅08-Vue3 axios 对象封装✅09-ESLint 配置及说明✅10-ESLint 与 Prettier 集成配置及说明✅11-Mock.js 模拟接口数据✅12-Vite原创 2021-09-28 00:20:36 · 4207 阅读 · 0 评论 -
15-Pinia实现store状态管理
Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列✅01-初始化Vite项目 ✅02-配置Vite2环境变量 ✅03-Vite2配置及说明 ✅04-Vue3使用SCSS ✅05-Vue3路由原创 2021-09-25 17:07:57 · 1853 阅读 · 0 评论 -
14-Element-Plus实现后台管理系统布局
Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列✅01-创建项目 ✅02-环境变量 ✅03-Vite配置 ✅04-引入scss ✅05-路由初试 &n原创 2021-09-23 00:00:54 · 2482 阅读 · 0 评论 -
13-渐变+透明样式实现清爽登录页
Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列✅01-创建项目 ✅02-环境变量 ✅03-Vite配置 ✅04-引入scss ✅05-路由初试 &n原创 2021-09-19 22:14:28 · 840 阅读 · 0 评论 -
12-Vite2引入Element-Plus框架
Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列✅01-创建项目 ✅02-环境变量 ✅03-Vite配置 ✅04-引入scss ✅05-路由初试 &n原创 2021-09-19 00:34:15 · 623 阅读 · 2 评论 -
11-Mock.js模拟接口数据
Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列✅01-创建项目 ✅02-环境变量 ✅03-Vite配置 ✅04-引入scss ✅05-路由初试 &n原创 2021-08-05 01:43:39 · 518 阅读 · 0 评论 -
10-ESLint与Prettier集成配置及说明
Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列✅01-创建项目 ✅02-环境变量 ✅03-Vite配置 ✅04-引入scss ✅05-路由初试 &n原创 2021-08-03 23:58:11 · 760 阅读 · 0 评论 -
09-ESLint配置及说明
文章目录ESLint配置???? 目标???? 功课ESLint什么是ESLint怎么用怎么读取配置怎么忽略被检测文件怎么在 VS Code 启用配置项说明???? 准备安装依赖创建 ESLint 文件???? CodingESLint 配置ESLint 被忽略文件配置???? 结果源码地址:GitHub / 码云ESLint配置???? 目标配置并启用 ESLint 。???? 功课ESLint 是个什么东西?该怎么用?配置项是什么意思?我相信很多同学有这些疑问,so am I。这次我原创 2021-08-01 23:54:26 · 622 阅读 · 0 评论 -
08-Vue3 axios对象封装
文章目录axios封装???? 目标???? 准备调整文件&目录???? Coding定义类型中止请求类自定义 axios 类实例化自定义 axios 对象Demo 组件???? 结果源码地址:GitHub / 码云axios封装???? 目标封装axios相关工具类,实现功能包含axios配置、拦截器、发送请求、中止请求。???? 准备调整文件&目录在 /src/utils 目录下创建 axios 封装类。utils文件目录结构如下:???? src----???原创 2021-07-31 20:37:43 · 865 阅读 · 1 评论 -
07-Vue3使用axios
小试axios???? 功课axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。可以直接使用 axios 静态对象,也可以自己创建一个实例,为防止静态对象被修改,最好自己创建个实例。创建 axios 实例的接口为 create(config?: AxiosRequestConfig): AxiosInstance,接受一个 AxiosRequestConfig 参数,返回axios 实例 AxiosInstance。AxiosRequestConfig原创 2021-07-31 20:23:10 · 647 阅读 · 0 评论 -
06-TypeScript配置及说明
TS配置???? 功课什么是 tsconfig.json?如果目录中存在 tsconfig.json 文件表明该目录是 TS 项目的根目录。TS 不是原生的 JS 代码,需要进行编译才能转换为 JS 代码。tsconfig.json 文件指定了编译项目所需的根文件和编译器选项。???? 如果是 JS 项目,也可以用 jsconfig.json 编译。使用 GitHub 上的基本配置根据你的 JavaScript 运行时环境(node10、node12、node14、React Native等原创 2021-07-31 20:13:57 · 681 阅读 · 0 评论 -
05-Vue3路由配置
路由初试???? 功课实际生活中的应用界面,通常由多层嵌套的组件组合而成。例如后台管理系统 layout (布局)一般由 navbar、sidebar、content、footer 组成,布局示意图如下:除了 content 外,其它三个区域的内容一般不会变动,在这种情况下,可以使用嵌套路由,将 content 设为嵌套路由中的子路由,即路由视图出口。这样每次路由变化只会重新渲染 content 。下面是请求“后台首页”和“用户管理页”的示意图:???? 改变 URL 的片段通常对应于特定原创 2021-07-31 20:12:15 · 866 阅读 · 0 评论 -
04-Vue3使用SCSS
引入scss???? 目标以变量形式编写样式。???? 准备安装依赖npm install -D sass调整文件&目录在 src 目录下创建 styles 文件夹,用来存放样式文件。styles文件目录结构如下:???? src----???? styles--------???? common------------???? font.scss--------???? variable------------???? color.scss--------????原创 2021-07-31 20:11:10 · 1444 阅读 · 1 评论 -
03-Vite2配置及说明
Vite配置???? 功课配置文件解析运行 Vite 时会自动解析项目根目录下名为 vite.config.js 的文件。默认生成的文件如下:import { defineConfig } from 'vite'export default defineConfig({ // ...})常用配置项说明下面列举了部分常用配置,详细配置参考 Vite官网。base类型: string默认: /开发或生产环境服务的 公共基础路径。合法的值包括以下几种:绝对 URL 路原创 2021-07-31 20:09:56 · 1355 阅读 · 1 评论 -
02-配置Vite2环境变量
环境变量???? 功课.env文件Vite 在你的项目根目录下从以下文件加载额外的环境变量。.env # 所有情况下都会加载.env.local # 所有情况下都会加载,但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载,但会被 git 忽略加载的环境变量会通过 import.meta.env 暴露给客户端源码。???? 为了防止意外地将一些环境原创 2021-07-31 20:08:24 · 1697 阅读 · 0 评论 -
01-初始化Vite项目
文章目录创建项目???? 目标???? 准备开发环境初始化Vite启动项目???? Coding精简 HelloWorld.vue精简 App.vue???? 验证创建项目???? 目标用 vite2 创建 vue3 + TypeScript 项目,并精简项目代码。???? 准备开发环境名称版本Node.js14.17.3NPM6.14.13???? 以上是我的本地环境。初始化Vite执行初始化命令后会有提示,按提示操作即可(上下键选择、回车确认)。原创 2021-07-31 20:02:58 · 1807 阅读 · 0 评论