Giter VIP home page Giter VIP logo

js-banana / vite-vue3-ts Goto Github PK

View Code? Open in Web Editor NEW
354.0 354.0 100.0 23.44 MB

vite、vue3、script setup、TypeScript、pinia、ant-design-vue

Home Page: https://js-banana.github.io/vite-vue3-ts/

License: MIT License

Shell 0.34% JavaScript 2.91% TypeScript 56.68% HTML 0.24% Vue 37.02% Less 2.80%
admin ant-design ant-design-vue pinia setup template typescript vite vue vue-admin vue-admin-template vue3

vite-vue3-ts's Introduction

vite-vue3-ts

ci

介绍

一个使用 vite + vue3 + pinia + ant-design-vue + typescript 完整技术路线开发的项目,秒级开发更新启动、新的vue3 composition api 结合 setup纵享丝滑般的开发体验、全新的 pinia状态管理器和优秀的设计体验(1k的size)、antd无障碍过渡使用UI组件库 ant-design-vue、安全高效的 typescript类型支持、代码规范验证、多级别的权限管理~

相关文章:https://juejin.cn/post/7041188884864040991

本项目相关改动及更新见【更新记录↓↓↓】

特性

  • ✨脚手架工具:高效、快速的 Vite
  • 🔥前端框架:眼下最时髦的 Vue3
  • 🍍状态管理器:vue3新秀 Pinia,犹如 react zustand般的体验,友好的api和异步处理
  • 🏆开发语言:政治正确 TypeScript
  • 🎉UI组件:antd开发者无障碍过渡使用 ant-design-vue,熟悉的配方熟悉的味道
  • 🎨css样式:lesspostcss
  • 📖代码规范:EslintPrettierCommitlint
  • 🔒权限管理:页面级、菜单级、按钮级、接口级
  • ✊依赖按需加载:unplugin-auto-import,可自动导入使用到的vuevue-router等依赖
  • 💪组件按需导入:unplugin-vue-components,无论是第三方UI组件还是自定义组件都可实现自动按需导入以及TS语法提示

项目目录

├── .husky                              // husky git hooks配置目录
    ├── _                               // husky 脚本生成的目录文件
    ├── commit-msg                      // commit-msg钩子,用于验证 message格式
    ├── pre-commit                      // pre-commit钩子,主要是和eslint配合
├── config                              // 全局配置文件
    ├── vite                            // vite 相关配置
    ├── constant.ts                     // 项目配置
    ├── themeConfig.ts                  // 主题配置
├── dist                                // 默认的 build 输出目录
├── mock                                // 前端数据mock
├── public                              // vite项目下的静态目录
└── src                                 // 源码目录
    ├── api                             // 接口相关
    ├── assets                          // 公共的文件(如image、css、font等)
    ├── components                      // 项目组件
    ├── directives                      // 自定义 指令
    ├── enums                           // 自定义 常量(枚举写法)
    ├── hooks                           // 自定义 hooks
    ├── layout                          // 全局布局
    ├── router                          // 路由
    ├── store                           // 状态管理器
    ├── utils                           // 工具库
    ├── views                           // 页面模块目录
        ├── login                       // login页面模块
        ├── ...
    ├── App.vue                         // vue顶层文件
    ├── auto-imports.d.ts               // unplugin-auto-import 插件生成
    ├── components.d.d.ts               // unplugin-vue-components 插件生成
    ├── main.ts                         // 项目入口文件
    ├── shimes-vue.d.ts                 // vite默认ts类型文件
    ├── types                           // 项目type类型定义文件夹
├── .editorconfig                       // IDE格式规范
├── .env                                // 环境变量
├── .eslintignore                       // eslint忽略
├── .eslintrc                           // eslint配置文件
├── .gitignore                          // git忽略
├── .npmrc                              // npm配置文件
├── .prettierignore                     // prettierc忽略
├── .prettierrc                         // prettierc配置文件
├── index.html                          // 入口文件
├── LICENSE.md                          // LICENSE
├── package.json                        // package
├── pnpm-lock.yaml                      // pnpm-lock
├── postcss.config.js                   // postcss
├── README.md                           // README
├── tsconfig.json                       // typescript配置文件
└── vite.config.ts                      // vite

使用说明

简要说明:

随着vite3.x的发布,本项目针对该依赖的相关生态做了升级,详情见分支 feat-vite3.x

需要指出的是vite3.x要求node14.18及以上,详情见 从 v2 迁移

  1. 克隆本项目

    git clone https://github.com/JS-banana/vite-vue3-ts.git
  2. 安装依赖

    # 推荐使用 pnpm
    pnpm install
    # 没有安装的直接安装
    npm install -g pnpm
  3. 启动项目

    pnpm serve
    # or
    pnpm dev
  4. 部署

    # 检查TS类型然后构建打包
    pnpm build:check
    # 跳过检查直接构建打包
    pnpm build
    # 预览
    pnpm preview

数据模拟

为了实现更多元化和真实数据展示,使用了Mock+fakerjs进行数据模拟,fakerjs的功能极其强大,几乎可以定制任何类型数据,本项目里做了部分演示,源码见mock/table.ts

ant-design-vue 2.x升级到3.x的说明

Table组件:

在2.x版本的时候,Table组件主要通过 columns属性,配置字段 slots: { customRender: 'action' }进行自定义插槽,做到制定内容的内容,基于此,本项目Table组件封装的内部实现为<template v-if="column.slots?.customRender === 'action'">

但是在3.x之后,官方舍弃了 columns中的slots属性,因此该方式需要做出调整,不过,我们的整体思路不变,即,确定一个通用且唯一的key为判断属性即可,以实现对不同内容的区别渲染。

目前的方案打算以columns中的key prop属性作为唯一判断的key,Table组件封装内部实现如<template v-if="column.key === 'action'">,因此,在columns中默认以dataIndex作为渲染key,而key作为我们的自定义渲染插槽内容的key。

官网API介绍如下:

Property Description Type Default
dataIndex Display field of the data record, support nest path by string array string/string[] -
key Unique key of this column, you can ignore this prop if you've set a unique dataIndex string -

Table高级组件的基本用法

详情及源码见:./src/components/Table/index.vue

几个核心API:

Property Description Type Default
url 接受一个异步请求函数,Table内部会自动接管状态(包括发起请求、分页参数等) Promise函数 -
columns 配置列表项 与官方API一致 -
hiddenFilter 是否展示Table上面的筛选项组件 Boolean -
tableActions 自定义action slot(需要在columns中指定key: 'action' ref/reactive类型数组 -
button 筛选组件中的独立按钮(如:新增用户) ref/reactive类型对象 -
items 筛选组件中的表单项(如:选择角色、搜索名称,会自动生成查询按钮,并接管到Table中的参数状态) ref/reactive类型数组 -
tableFilterModel 筛选组件中的表单项数据模型(配合items使用,为了确定key) ref/reactive类型对象 -
<template>
  <Table
    ref="ELRef"
    :url="fetchApi.list"
    :columns="columns"
    :actions="tableActions"
    :button="tableFilterButton"
    :items="tableFilterItems"
    :model="tableFilterModel"
  />
</template>

使用ref调用Table提供的方法API:

Property Description Type Default
refresh 不接受参数,使用当前的参数发起更新请求(在新增或删除、修改一条数据后,调用该方法进行列表更新 ()=>void -
run 接受参数,当需要与自定义参数合并时,并发起新的请求,使用此方 (params)=>void -
const refresh = () => ELRef.value?.refresh();
// const run = (args) => ELRef.value.run(args); 

特别说明

config/vite/plugin/mock.ts 中的 configMockPlugin 方法,属性prodEnabled 在生产环境一定要关闭,不然会把大量的mock代码,如fakerjs中的一些源码打包进构建包内。

本项目这里为了做演示,是手动开启了的,为了能在线上部署的时候查看mock数据,实际开发中一定注意关闭!!!

效果图

vite-vue3-3

vite-vue3-4

更新记录

  • 2022.01.18
    • 增加环境变量配置文件 .env/.env.development/.env.production
  • 2022.03.09
    • 为了优化服务器构建,移除 auto-imports.d.tscomponents.d.ts的git记录,加入.gitignore
    • 域名二级目录的路由配置优化 history: createWebHistory(import.meta.env.BASE_URL)
    • 路由模式由 hash调整为 history
  • 2022.05.07
    • 添加路由动效transition,优化用户体验,并抽离封装Breadcrumb组件
    • 添加权限指令v-role,调整权限逻辑,目前权限指令包括v-role/v-auth
    • Table相关组件有所改动,同步迭代了一些功能点,包括优化项
    • 建议配合该篇文章食用多级别权限设计思考及实战
  • 2022.06.21
    • ant-design-vue升级到3.x版本,同步更新改动了一些API
    • dayjs替换moment
  • 2022.07.24
    • ✔完善Table组件,更新了一些在项目中迭代的优化
    • ✔优化Table相关API,遵循ant-design-vue3.x官方用法进行迭代
    • ✔新增Table使用demo,增加各API用法示例,基本涵盖大部分用法
    • ✔新增fakerjs数据mock,配合Mockjs完善并增强对不同数据类型和场景的模拟
    • ✔完善文档,新增使用说明
    • PR
  • 2022.07.30
    • vite相关工具链升级到3.x
    • 现在你必须使用 Node 14.18+ / 16+ 版本。
    • 详情见分支 feat-vite3.x
    • 原有的vite2.x版本见分支 feat-vite2.x
    • 现在master主分支为最新的vite3.x版本
  • 2023.09.20
    • vite相关工具链升级到4.x
    • 详情见分支 feat-vite4.x
    • 现在master主分支为最新的vite4.x版本

计划

  • ant-design-vue 升级到 3.x版本
  • 主题换肤功能
  • 引入 tailwindcss

交流

你可以关注我公众号(前端小帅),加我微信交流,一起沟通学习~

公众号:前端小帅

感谢star

Stargazers over time

vite-vue3-ts's People

Contributors

js-banana avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

vite-vue3-ts's Issues

Actions not worker after antd vue upgrade to 3.0

The Component Table custom actions with

<template #bodyCell="{ column, text, record }">
  <template v-if="column.slots?.customRender === 'action'">
    <!-- etc -->
  </template>
</template>

But in ant design vue 3.x, it says Table deprecated column.slots, added v-slot:bodyCell, v-slot:headerCell, custom cells, and added column.customFilterDropdown v-slot:customFilterDropdown, custom filtering Menu, added v-slot:customFilterIcon custom filter button, but column.slots is still available, we will remove it in the next major version.

After add slots prop into columns , for example

export const columns: ColumnProps[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: 'Action',
    width: 120,
    slots: {
      customRender: 'action',
    },
  },
]

It doesn't behave as expected, render elements in . Instead, it renders nothing but blank space.

阅读过程中碰到的问题

1、当3000端口被占用时,项目仍能启动在3000端口,暂时无法断定是否为vite的问题
2、login界面输入错误账号密码时,界面刷新,看不清message
3、http.ts :74中,config:AxiosRequestConfig将不能到达:75 if (typeof config === 'string') {,建议修改为config: AxiosRequestConfig | string

启动很慢

同样的问题,启动很慢,启动之后凳面等待也是很慢,是使用缓存还是什么导致的呢?

doesn't work after install

doesn't work after install

npm run dev

[email protected] dev /Users/saulemprendedor/Documents/cleteci/vite-vue3-ts
vite

failed to load config from /Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/vite.config.ts
error when starting dev server:
Error: Cannot find module 'unplugin-vue-components/resolvers'
Require stack:

  • /Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/vite.config.ts
  • /Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/dist/node/chunks/dep-88bd5805.js
  • /Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/dist/node/cli.js
  • /Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/bin/vite.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object. (/Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/vite.config.ts:114:24)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.require.extensions. [as .ts] (/Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/dist/node/chunks/dep-88bd5805.js:61911:20)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at loadConfigFromBundledFile (/Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/dist/node/chunks/dep-88bd5805.js:61919:17)
    at loadConfigFromFile (/Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/dist/node/chunks/dep-88bd5805.js:61838:32)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async resolveConfig (/Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/dist/node/chunks/dep-88bd5805.js:61365:28)
    at async createServer (/Users/saulemprendedor/Documents/cleteci/vite-vue3-ts/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59772:20)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] dev: vite
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/saulemprendedor/.npm/_logs/2022-05-03T03_12_42_852Z-debug.log

antv3.x版本升级问题(antv3.x version upgrade issues)

  • 本项目是基于antv2.x进行开发的,其中一些组件也是围绕着该版本的API进行设计开发,在升级3.x版本的过程中对于一些组件,涉及到一些破坏性的改动如:Table组件,碍于一些条件的限制下,并没有完成对3.x的完全跟进替换
  • 对于项目中产生的问题可以在此反馈,也希望大家一起结合官方issue进行讨论。
  • 对于无历史包袱的新项目建议直接使用3.x的新版本

  • The project is based on antv2.x development, some of the components are also designed around the version of the API development, in the process of upgrading the 3.x version for some components, involving some destructive changes such as: Table components, due to some conditions, and not complete the complete follow-up of 3.x replacement
  • For the project generated in the problem can be here to feedback, but also hope that we can discuss together with the official issue.
  • For new projects without historical baggage, it is recommended to use the new version of 3.x directly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.