- 版本
node:v20.11.1pnpm:10.2.1vue: 3.5.13vite:
- 创建git仓库
以下是在gitee创建了“admin-template”
https://gitee.com/gzcltech/admin-template
- 初始化项目
pnpm create vue@latest
选择如下
4. clone模板
git clone https://gitee.com/kailong110120130/vue-element-plus-admin.git vue-element-plus-admin-new
- 复制模板
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 .
- 安装依赖包
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) 修改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