001、Vue3 + Vite + TypeScript + Element-Plus，第一个后台管理项目走向第一步：开建

已于 2024-03-31 10:27:55 修改
阅读量966 收藏 25
点赞数 12
分类专栏： python+vue3+fastapi+ai 学习 文章标签： vue.js 学习 json
于 2024-03-31 10:25:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangkp/article/details/137155951
版权

一、基本环境创建

1、安装nvm

在 https://github.com/coreybutler/nvm-windows/releases  下載nvm-setup.exe

Windows 下直接安装

nvm list available 查看nodejs版本
|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    21.7.1    |   20.12.0    |   0.12.18    |   0.11.16    |
|    21.7.0    |   20.11.1    |   0.12.17    |   0.11.15    |
|    21.6.2    |   20.11.0    |   0.12.16    |   0.11.14    |
|    21.6.1    |   20.10.0    |   0.12.15    |   0.11.13    |
|    21.6.0    |    20.9.0    |   0.12.14    |   0.11.12    |
|    21.5.0    |   18.20.0    |   0.12.13    |   0.11.11    |
|    21.4.0    |   18.19.1    |   0.12.12    |   0.11.10    |

2、安装nodejs

nvm install 20.12.0

安装完后use node 20.12.0 要选择使用哪一个
nvm uninstall 20.12.0 可以卸载
D:\work_hzyh>node -v
v20.12.0

安装完成

3、安装pnpm  

pm i -g pnpm
pnpm get registry
pnpm set registry https://registry.npmmirror.com

# 允许设置全局安装包的 bin 文件的目标目录。
pnpm config set global-bin-dir "D:\pnpm-store"
# 包元数据缓存的位置。
pnpm config set cache-dir "D:\pnpm-store\pnpm-cache"
# pnpm 创建的当前仅由更新检查器使用的 pnpm-state.json 文件的目录。
pnpm config set state-dir "D:\pnpm-store\pnpm-state"
# 指定储存全局依赖的目录。
pnpm config set global-dir "D:\pnpm-store\global"
# 所有包被保存在磁盘上的位置。
#（可选，以下这条命令可以选择不执行也是OK的）
pnpm config set store-dir "D:\pnpm-store\pnpm-store"

二、创建项目

pnpm create vite@latest hzyh-admin --template vue-ts

 cd hzyh-admin
  pnpm install
  pnpm run dev
即可看到界面

 界面这个样子

 三、package.json解析

安装各种插件（后面带-D 放在devDependencies下，开发环境，打包后不需要的，不加-d放在dependencies，也可以加-S生产环境中使用的）分开装也可以，放在json里直接pnpm i 就ok

 四、Vite多环境配置及变量识别规

配置 Vite | Vite 官方中文文档 icon-default.png?t=N7T8https://cn.vitejs.dev/config/看官方文档基本都能看明白

* 关于vite的别名是`vite dev`，`vite serve`

A、主要要注意几点

1、vite以当前工作目录作为根目录启动开发服务器，其实就是我们项目目录下面，也就是和vite.config.ts一个目录,当然也可以自己配置

2、vite的别名是`vite dev`，`vite serve`，

3、默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量

3、通过--mode 来指定模式，会覆盖默认模式，比如下面代码中

"dev": "vite"，执行pnpm dev时，打印 command ===  serve mode ===  development，

如果我们 "dev": "vite --mode local",，那么执行pnpm dev  答应command ===  serve mode ===  local，同时意味着它会自动加载 .env.local 中存在的环境变量

{

        "scripts": {

                "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`

                "build": "vite build", // 为生产环境构建产物

                "preview": "vite preview" // 本地预览生产构建产物

        }

}

4、注意 Vite 默认是不加载 .env 文件的，需要的时候使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件

B、看看代码的效果

下面我们看看vite.config.ts

// 当前执行node命令时文件夹的地址(工作目录)

const root = process.cwd()

// https://vitejs.dev/config/

export default ({ command, mode }: ConfigEnv): UserConfig => {

  console.log("command === ",command);

  console.log("mode === ",mode);

  let env = {} as any

   env = loadEnv(mode, root)

console.log("env === ",env);

  return {

  }

}

 需要做的事情

Test 1 、我们先定义一个.env文件，后面不带mode，在里面定义两个常量，并且，package.json文件里设置成 "dev": "vite", 然后我们打印小env的值，运行一下pnpm dev

# 标题

VITE_APP_TITLE=测试系统

TEST='我是.env'

command ===  serve
mode ===  development
env ===  { VITE_APP_TITLE: '测试系统' }

说明什么，说明调用了.env，但是我们好像定义了两个，现在只答应了一个，这个就是vite的规定，前面必须是“VITE_”，当然也可以改，不过觉得没必要

改为这样

# 标题

VITE_APP_TITLE=测试系统

VITE_TEST='我是.env'

 打印结果就正常了

command ===  serve
mode ===  development
env ===  { VITE_APP_TITLE: '测试系统', VITE_TEST: '我是.env' }

Test 2 、我们把package.json文件里设置成 "dev": "vite --mode local" 或者别的都可以，然后测测试

Error: "local" cannot be used as a mode name because it conflicts with the .local postfix for .env files.

这个错误后面来说

local不能用。改为别的dev "dev": "vite --mode dev"，再测试

打印结果，说明调用了.env

command ===  serve
mode ===  dev
env ===  { VITE_APP_TITLE: '测试系统', VITE_TEST: '我是.env' }

Test 3 、 我们添加一个文件，和.env同目录名字就是.env.dev,后面就是刚才加的mode，

我们也在该文件下加上个常量，然后测试一下

# 标题

NODE_ENV = development

VITE_TEST ='我是.env.dev'

打印值，看看清楚，.env.dev中的VITE_TEST覆盖了.env中的VITE_TEST，所以以后定义是要注意

command ===  serve
mode ===  dev
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.dev',
  VITE_USER_NODE_ENV: 'development'
}

看看打印值是不是.env和.env.dev的都调用了，看到现在应该基本都懂了吧

Test 4 、 为什么会出现local的错误

里面加两条数据，然后把"dev": "vite --mode dev",改为"dev": "vite --mode local-dev",我们再执行测试一下

NODE_ENV = local

VITE_TEST ='我是.env.local'

command ===  serve
mode ===  local-dev
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.local',
  VITE_USER_NODE_ENV: 'lcoal'
}
NODE_ENV=lcoal is not supported in the .env file. Only NODE_ENV=development is supported to create a development build of your project. If you need to set process.env.NODE_ENV, you can set it in the Vite config instead.

 上面打印除了信息，说明调用了.env和.env.local,而且还有个小错误，不能改为NODE_ENV=local我们改回NODE_ENV=development，正常，但是我们发现没有调用.env.dev,

Test 5 、我们改为"dev": "vite --mode local-dog",执行一下

打印结果不受影响，多试试local-****，发现都是这结果，原理未知

command ===  serve
mode ===  local-dog
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.local',
  VITE_USER_NODE_ENV: 'development'
}

Test 6 、上面觉得结果有点出乎意料，然后把"dev": "vite --mode local-dog", 改为"dev": "vite"

打印结果，更加神奇，说明和--mode后面是local什么没关系，都调用了.env.local,这结果，让我不得不测试了Test 7

command ===  serve
mode ===  development
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.local',
  VITE_USER_NODE_ENV: 'development'
} 

 Test 7 、把"dev": "vite"改为"dev": "vite --mode dev",

打印结果，

command ===  serve
mode ===  dev
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.dev',
  VITE_USER_NODE_ENV: 'development'
}
 

还好这个结果是预期，要不搞不懂了，

C、总结一下： 

1、local是个特殊，应该是系统内部有默认，其实就是--mode后面没有别的，就会调local

2、其他的就是你scripts --mode是啥就建一个啥文件就行了 

* 关于build部分 

也来测试几下就行了

Test 1、把scripts 里设置为"build": "vite build"

打印结果，啥参数都没有，一样调用了.env.local和.env

command ===  build
mode ===  production
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.local',
  VITE_USER_NODE_ENV: 'development'
} 

 Test 2、把scripts 里设置为"build": "vite build --mode local-dog"

打印结果，所以有没有都会调用.env.local和.env

command ===  build
mode ===  local-dog
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.local',
  VITE_USER_NODE_ENV: 'development'
} 

 Test 2、把scripts 里设置为"build": "vite build --mode dev"

结果很明显，没啥好说的，和serve时是一样的

command ===  build
mode ===  dev
env ===  {
  VITE_APP_TITLE: '测试系统',
  VITE_TEST: '我是.env.dev',
  VITE_USER_NODE_ENV: 'development'
} 

 后面就不测了，build的和前面vite调用参数是一样的

浪淘沙jkp
关注
  • 12
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin :party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + vue3 + typescript ，提供最基础的框架模型，可以帮助你快速搭建企业级中后台产品原型。 PS：我是参考 开发维护的 ， 十分感谢大佬对开源社区做出的贡献 :) 前序准备 你需要在本地安装 和 。本项目技术栈基于 、、、 、 、axios 和 element-plus，提前了解和学习这些知识会对使用本项目有很大的帮助。 开发 # 克隆项目 git clone https://github.com/au1996/vue3-element-admin-ts.git # 进入项目目录 cd v
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。 在线预览地址：http://vue3.youlai.tech 开源仓库地址：https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址：https://gitee.com/youlaiorg/youlai-boot
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于 2.3MB，并且会永久同步完整版的代码。
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ........
Vue3+Vite5+TypeScript+Element-Plus构建的后台管理前端模板，配套接口文档和后端源码
04-25
Vue3+Vite5+TypeScript+Element-Plus构建的后台管理前端模板，配套接口文档和后端源码，vue-element-admin 的 Vue3 版本。
vue3+vite+ts项目配置开发环境和生产环境 打包命令配置
码农键盘上的梦
06-20 8994
开发环境和生产环境的配置和打包方式有所不同，下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。打包完成后会在项目根目录下生成dist目录，里面包含了打包后的静态文件和index.html文件，可以直接部署到服务器上。这里配置了三个命令，分别是开发环境启动命令、开发环境打包命令和生产环境打包命令。1.3 配置.env.development。2.2 配置.env.production。1.2 配置vite.config.ts。2.1 配置vite.config.ts。
vue-vite的项目配置开发环境、测试环境、生产环境地址
qq_68155756的博客
03-29 1902
需要在和src同级的目录下新建3个文件，代表开发环境地址和生产环境地址，文件名要一字不差 .env.development .env.production .env.test 使用：在不同环境中，其他文件使用import.meta.env.VITE_BASE_API就代表不同的地址
vue3+vite+ts配置
web$-小白
06-24 2745
指的是软件开发中用于正式运行和交付的环境，生产环境一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。这样就定义了一个名为 --primary-color 的全局变量，可以在整个页面中使用。注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试。都是用于定义 CSS 变量的方法，但它们有一些区别。测试环境（testing）
一篇文章教小白学会搭建 vite + ts + vue3 项目，手把手教程，不会算我输（第一篇）
热门推荐
qq_17335549的博客
12-29 2万+
【前端工程化实践】手把手教小白搭建 vite + ts + vue3 项目
vite+vue3+ts项目构建详细步骤（配置多语言版本）
失眠时间的博客
05-15 9854
由于之前几乎都是使用Webpack 构建项目，偶尔使用了gulp。最近两年才开始使用Vue3开发项目，所以特意记录下Vite构建期间的使用方式。后续也会花时间写下webpack构建项目的文章，期待后期的更新～
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1182
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 473
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
小程序的数据驱动和vue的双向绑定有何异同
最新发布
qingdouxiaohua的博客
06-02 292
小程序的数据驱动和Vue的双向绑定在概念和应用上既有相似之处，也存在明显的差异。
vue3 vue-draggable-next 实现拖拽穿梭框效果
游九尘的博客
06-01 271
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 319
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
我成功创建了一个Electron应用程序
lulei5153的博客
06-02 127
1.创建electron项目命令： yarn create @quick-start/electron electron-memo。2选择：√ Select a framework: » vue。3.命令：cd electron-memo。6.打包命令：yarn build:win。5.启动命令： yarn dev。7.修改 index.html。6.修改 App.vue。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 458
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
vue3+vite4+element-plus+typescript编写的一款后台管理系统(兼容移动端)
09-16
Vue3是一种流行的JavaScript框架，它被广泛用于构建现代化的Web应用程序。Vite4是Vue3的一种构建工具，它具有快速的冷启动时间和即时的热模块替换，使开发过程更加高效。Element Plus是一套基于Vue3的UI组件库，它提供了丰富的可定制化的组件，使得构建界面变得简单。 这款后台管理系统是使用Vue3、Vite4和Element Plus进行开发的。它提供了一个现代化的用户界面，适用于管理各种类型的后台数据。 由于使用了Vue3和Vite4，该后台管理系统具有卓越的性能和开发速度。Vue3的响应式数据绑定机制可以确保数据状态的变更能够自动同步到界面上，使用户获得更流畅和高效的交互体验。Vite4的快速冷启动和即时热模块替换功能，可以大大提升开发过程中的效率，保证开发者可以实时看到代码改动的效果。 另外，使用Element Plus作为UI组件库，可以让开发者快速构建各种功能丰富的界面元素。Element Plus提供了大量的可用组件，如表格、表单、图表等，开发者可以根据需求轻松地快速搭建出美观且易用的后台管理系统。 这款后台管理系统还具备移动端适配能力，可以在手机等移动设备上正常访问和使用。通过Vue3的响应式设计和Element Plus的响应式布局，界面可以根据不同的屏幕大小和设备自动适应并呈现最佳的使用体验。 总而言之，这款使用Vue3、Vite4和Element Plus开发的后台管理系统具有出色的性能、灵活的开发工具、丰富的可定制化组件和良好的移动端适配能力，适合开发者快速构建现代化的后台管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值