后台管理系统前端搭建

news/2025/2/15 15:30:46/
  1. 版本
 node:v20.11.1pnpm:10.2.1vue: 3.5.13vite: 
  1. 创建git仓库
    以下是在gitee创建了“admin-template”
https://gitee.com/gzcltech/admin-template
  1. 初始化项目
pnpm create vue@latest

选择如下
在这里插入图片描述
4. clone模板

git clone https://gitee.com/kailong110120130/vue-element-plus-admin.git vue-element-plus-admin-new
  1. 复制模板
rm -rf ./src
rm -rf env.d.ts
cp -rf ../vue-element-plus-admin-new/vite.config.ts .
cp -rf ../vue-element-plus-admin-new/src .
cp -rf ../vue-element-plus-admin-new/types .
cp -rf ../vue-element-plus-admin-new/postcss.config.cjs .
cp -rf ../vue-element-plus-admin-new/plop .
cp -rf ../vue-element-plus-admin-new/plopfile.cjs .
cp -rf ../vue-element-plus-admin-new/scripts .
cp ../vue-element-plus-admin-new/.env.base .env.dev
cp ../vue-element-plus-admin-new/.env.test .env.test
cp ../vue-element-plus-admin-new/.env.pro .env.pro
cp ../vue-element-plus-admin-new/.browserslistrc .
cp ../vue-element-plus-admin-new/public/logo.png ./public/
cp ../vue-element-plus-admin-new/prettier.config.cjs .
cp ../vue-element-plus-admin-new/stylelint.config.cjs .
cp ../vue-element-plus-admin-new/uno.config.ts .
cp ../vue-element-plus-admin-new/index.html .
  1. 安装依赖包
pnpm install element-plus lodash-es @vueuse/core @wangeditor/editor @wangeditor/editor-for-vue@next @zxcvbn-ts/core animate.css axios 
pnpm install nprogress cropperjs dayjs driver.js echarts echarts-wordcloud  mitt monaco-editor pinia-plugin-persistedstate 
pnpm install qrcode qs url vue-draggable-plus vue-i18n vue-json-pretty xgplayer vue-types mockjspnpm install -D @iconify/json @iconify/vue @intlify/unplugin-vue-i18n @types/fs-extra @types/inquirer @types/lodash-es @types/nprogress @types/qrcode
pnpm install -D @types/qs @types/sortablejs @unocss/transformer-variant-group @vitejs/plugin-legacy autoprefixer chalk consola
pnpm install -D  esno fs-extra inquirer plop postcss postcss-html postcss-less rimraf rollup rollup-plugin-visualizer terser unocss vite-plugin-ejs
pnpm install -D vite-plugin-progress vite-plugin-purge-icons vite-plugin-style-import vite-plugin-svg-icons vite-plugin-url-copy less prettier
pnpm install -D stylelint@^16.14.1 stylelint-config-html stylelint-config-recommended@^14.0.1 stylelint-config-standard@^36.0.1 stylelint-order
  1. 修改代码和配置
1) 修改tsconfig.app.json修改env.d.ts为"types/**/*.d.ts"
2)修改vite.config.ts
// import EslintPlugin from 'vite-plugin-eslint'
// import { viteMockServe } from 'vite-plugin-mock'
去掉 '@iconify/iconify',optimizeDeps: {include: [....//'@iconify/iconify',....]}
3) 修改package.json
scripts 下面增加
"dev": "vite --mode dev",
"build:pro": "vite build --mode pro",
"build:test": "vite build --mode test",
"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"p": "plop",
"icon": "esno ./scripts/icon.ts"
4) 修改src/api/login.ts
请求的地址中 去掉mock
5)修改src/App.vue
去掉ElNotification
6) 修改src目录的以下文件
utils/propTypes.ts
utils/tsxHelper.ts 
utils/useValidator.tsstore/modules/app.ts 
store/modules/locale.ts
store/modules/user.tsaxios/types/index.ts 
axios/config.ts 
axios/service.tsviews/Dashboard/echarts-data.tshooks/web/useIcon.ts 
hooks/web/useTagsView.ts 
hooks/web/useGuide.ts 
hooks/web/useConfigGlobal.ts 
hooks/web/useTimeAgo.ts
hooks/web/useForm.ts
hooks/web/useCrudSchemas.tscomponents/Editor/index.ts
components/Form/types/index.ts
components/IAgree/src/IAgree.vue
components/Avatars/src/Avatars.vue
components/Button
components/Table
components/Tagsview
components/Tree
components/UserInfo

http://www.ppmy.cn/news/1572273.html

相关文章

【BUG】conda虚拟环境下,pip install安装直接到全局python目录中

问题描述 conda虚拟环境下,有的虚拟环境的python不能使用(which python时直接使用全局路径下的python),且pip install也会安装到全局路径中,无法安装到conda虚拟环境中。 解决方案 查看虚拟环境的PIP缓存默认路径&…

微信小程序实战项目001:NBA球队太阳队简介

文章目录 1、效果预览2、项目起步3、首页开发4、球队页面开发5、球员页面开发6、球员详细信息页面开发7、完整项目下载1、效果预览 首页: 球队: 球员: 球员详细信息: 2、项目起步 不同版本的HBuilderX可能方式略微不同,且生成的默认文件也不同,这里的HBuilderX版本是2…

DeepSeek-VL2 环境配置与使用指南

DeepSeek-VL2 环境配置与使用指南 DeepSeek-VL2 是由 DeepSeek 公司开发的一种高性能视觉-语言模型(VLM)。它是 DeepSeek 系列多模态模型中的一个版本,专注于提升图像和文本之间的交互能力。 本文将详细介绍如何配置 DeepSeek-VL2 的运行环…

LeetCode 热门100题-和为 K 的子数组

题目描述: 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1: 输入:nums [1,1,1], k 2 输出:2 class Solution { public:int…

1、Prometheus 监控系统(上)

Prometheus 监控系统(上) 认识一下 PrometheusPrometheus 的特点Prometheus 的生态组件Prometheus 的工作模式Prometheus 的工作流程Prometheus 的局限性: 部署 PrometheusPrometheust Server 端安装和相关配置部署 Exporters部署 Node Expor…

基于SpringBoot的电影院售票管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…

Ubuntu 24.04 上安装 Nginx

在 Ubuntu 24.04 上安装 Nginx,可以按照以下步骤进行: 更新系统包 首先,确保你的包管理器是最新的。打开终端并执行: sudo apt update sudo apt upgrade安装 Nginx 安装 Nginx 只需要运行以下命令: sudo apt install n…

基于Flask的影视剧热度数据可视化分析系统的设计与实现

【FLask】基于Flask的影视剧热度数据可视化分析系统的设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 随着互联网技术的飞速发展,影视剧行业的数据量呈爆炸性增长&#x…