从零开始vue3+vite+ts+pinia+router4后台管理(1)

写在前面的话

公司上半年重构了后台管理页面，用了vue3+elementPlus +vite++ts+pinia+vue-router4 ，想记录一下一个公司后台管理项目从零到开始的过程

# 克隆项目 gitee地址
git clone https://gitee.com/3439/vue3dny-admin.git# 进入项目目录
cd vue3dny-admin# 安装依赖
npm install# 本地开发 启动项目
npm run dev

要实现的功能

登陆动态路由侧边栏
标签栏
页面布局切换
element plus 表格的二次封装
element plus 表单的二次封装
一些常用的自定义指令
虚拟表格
表格的拖拽排序

效果图

项目规范和目录

组件命名大驼峰，如TagsView
一个功能模块一个文件夹，文件夹名全部小写，入口文件为index.vue
公共组件放在components文件夹下，页面组件放在对应的页面components文件夹下
hooks放hooks函数 utils公用函数
所有的请求接口放在api文件夹下，api文件夹的ts文件要和views功能模块一一对应

├── public
│   └──  favicon.ico
├── src
│   ├── api                 # 接口请求
│   │   ├── dashboad.ts
│   │   └── system.ts
│   │   └── user.ts
│   ├── assets              # 静态资源
│   │   └── logo.png
│   ├── components          # 公共组件
│   │   └── Table           # 表格组件
│   │       └── index.vue
│   ├── layout              # 布局组件
|   |   ├── components
│   │   └── index.vue
│   ├── views               # 页面
│   │   ├── dashboard
│   │   │   └── index.vue
│   │   └── system
│   │       └── index.vue
│   │   └──user
│   │       └── user.vue
│   ├── router              # 路由
│   │   ├── index.ts
│   │   └── routes.ts
│   ├── store               # 状态管理
│   │   ├── permission.ts
│   ├── styles              # 样式
│   │   └── index.css
│   ├── utils               # 工具函数
│   │   ├── index.ts
│   │   └── request.ts
│   ├── App.vue            # 入口组件
│   └── main.ts            # 入口文件
│   └── permission.ts      # 入口权限判断ts
├── .gitignore             # git忽略文件
|── index.html             # 入口html文件
├── package.json           # 依赖包
├── README.md              # 项目说明
├── tsconfig.node.json     # TypeScript 编译器的配置文件
└── vite.config.js         # vite配置

代码的结构一定要整洁有规范后期才能容易维护

技术栈和版本

Vite 需要 Node.js 版本 14.18+，16+，其他直接看我的package.json简单又方便

{"name": "vue3dny-admin","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview"},"dependencies": {"@element-plus/icons-vue": "^2.1.0","axios": "^1.5.0","element-plus": "^2.3.14","js-cookie": "^3.0.5","nprogress": "^0.2.0","pinia": "^2.1.6","vue": "^3.3.4","vue-router": "^4.2.4"},"devDependencies": {"@types/node": "^20.6.0","@vitejs/plugin-vue": "^4.2.3","typescript": "^5.0.2","vite": "^4.4.5","vue-tsc": "^1.8.5"}
}

vue3中vite的@路径别名和Vite 配置文件

1、在项目中安装依赖包**
安装@types/node 这个配置地址时会用到

npm install @types/node --save-dev

2、修改vite.config.ts配置路径别名@和Vite 配置文件，因为我这个测试项目用的接口比较少，用的是fastmock模拟前端数据，正式项目推荐apiFox 它是API 文档、API 调试、API Mock、API 自动化测试一体化协作平台，具体的大家官网查看吧

// https://vitejs.dev/config/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";//这个path用到了上面安装的@types/node// https://vitejs.dev/config/
export default ({ mode }) => {return defineConfig({plugins: [vue()],//这里进行配置别名resolve: {alias: {'@': path.resolve('./src') // @代替src}},lintOnSave: false,//设置eslintserver: {port: 9527, // 设置服务启动端口号open: false, // 设置服务启动时是否自动打开浏览器host: '192.168.1.17',//自己本地的ip地址proxy: {'/apis': {target: 'https://www.fastmock.site/mock/fcb67647c7d0753834b840970f8e6ae8/dnyapi', //接口的域名secure: false, // 如果是https接口，需要配置这个参数changeOrigin: true, // 如果接口跨域，需要进行这个参数配置rewrite: (path) => path.replace(/^\/apis/, '/')}}}})
}

3、修改tsconfig.json 中的信息

{"compilerOptions": {"target": "ES2020",// 指定ECMAScript目标版本"useDefineForClassFields": true,// 是否校验TypeScript数据类型"module": "ESNext",// 生成代码的模板标准"removeComments": true, // 是否删除注释"outDir": "./dist", // 指定输出目录"lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": false,"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": {"@/*": ["src/*"]},    // 路径映射，相对于baseUrl/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }]
}

main.ts配置

import { createApp } from 'vue' //引入vue
import App from './App.vue'//引入入口组件
const app = createApp(App)// 创建vue实例
import router from './router/index'// 引入路由
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus样式
import './style.css'//引入全局样式
import "@/permission.ts"//路由钩子权限
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//引入element-plus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}// 全局导入plus图标import vlog from '@/utils/vue-awesome-console.ts'//解决console.log打印出对象的问题 自己用的
// 你可以选择将 vlog 方法挂在 console 对象上，然后像使用 console.log 一样使用 console.vlog
// 同时你也可以根据项目中的开发/生产模式，进行不同的使用方式
if (process.env.NODE_ENV === 'development' ) {window.console.vlog = vlog
} else {window.console.vlog = () => {}
}
import {createPinia} from 'pinia'//(读音：皮尼亚)引入状态管理
const pinia = createPinia()// 创建pinia实例
app.use(router)// 注册路由
app.use(ElementPlus)// 注册element-plus
app.use(pinia)// 注册状态管理
app.mount('#app')// 挂载vue实例

从零开始vue3+vite+ts+pinia+router4后台管理(1)相关推荐

vue3 + vite + ts + pinia + yarn
Vue3 + Vite + TypeScript + Pinia + Yarn yarn 常用命令 vite 构建工具 vite 创建项目 Vue 3 vue 3 组件库 vue 文档组合式 API ...
vue3：vue3+vite+ts+pinia
一.背景记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究选择后完成 2.2.vite.config. ...
uniapp+Vue3+Vite+ts+pinia
创建项目:npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 使用pinia-plugin-persistedstate可以实现持久化存 ...
基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 — Soybean Admin开源啦
???基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 - Soybean Admin开源啦??? 简介 Soybean Admin 是一个基于 Vue3.Vi ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
【记录】VUE3 + VITE + TS 配置跨域
[记录]VUE3 + VITE + TS 配置跨域在vite.config.ts进行如下设置在vite.config.ts进行如下设置 server: {host: true,// 设置端口号po ...
如何在vue3+vite+ts中使用require
vue3+vite+ts中不能使用require 之前使用vue2,去动态设置图片src属性时,采用require,但是vue3+vite+ts中使用require,项目能够运行,但浏览器中报错req ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
vue3 + vite + ts 集成mars3d
vue3 + vite + ts 集成mars3d 文章目录 vue3 + vite + ts 集成mars3d 前言一.创建一个vue3 + vite + ts项目二.引入mars3d相关依赖 ...
一个基于vue3+vite+ts的完整项目
VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 vue3 ...