github创建仓库,vue3+ts+vite初始化

1、先在github官网上创建一个账号https://github.com/

创建好账号之后再创建一个自己的仓库

2、在本地新建一个空的文件夹,打开vscode,用git clone命令将刚刚创建的库拉下来

3、进入仓库目录,cd 你的仓库名;

cd vue3Dom

使用 pnpm 创建一个新的Vue 3项目,并且支持TypeScript:

 pnpm create vite@latest  

依次输入自己要创建的文件名、选择vue、选择TypeScript,依次执行:

进入目标文件

cd vite-project

下载依赖

pnpm install

运行项目

pnpm run dev

运行结果如下,一个简单的vue3+ts+vite的dom创建完成

### 集成 Vue3Vite、Ant Design VueTypeScript 的解决方案 #### 项目初始化 通过 `npm` 初始化一个新的 Vite 项目,可以选择 VueTypeScript 支持作为初始配置选项。命令如下: ```bash npm create vite@latest my-project --template vue-ts ``` 这一步会创建一个基础的 Vue3 + TypeScript 项目结构[^2]。 #### 安装 Ant Design Vue 组件库 为了引入 Ant Design Vue 支持其功能模块化加载,可以安装以下插件调整项目的依赖项: ```bash npm install ant-design-vue npm install unplugin-vue-components -D ``` 其中,`unplugin-vue-components` 是用于按需加载组件的重要工具,能够显著减少打包体积和提升性能[^4]。 #### 使用 Pinia 替代 Vuex PiniaVue3 中推荐的状态管理库,相较于传统的 Vuex 更加轻量级且易于维护。可以通过以下方式安装: ```bash npm install pinia ``` 随后,在应用入口文件中注册 Pinia 实例即可完成状态管理的基础设置[^3]。 #### 自定义主题样式 如果需要实现自定义的主题颜色或其他 CSS 变量修改,则可通过 Ant Design Vue 提供的相关文档指导来操作。通常涉及编辑 `.env` 文件或者在 `vite.config.ts` 中指定路径指向用户定义的 LESS/SASS 文件位置[^5]。 #### 推荐模板项目 对于希望快速搭建具备上述技术栈特性的完整后台管理系统而言,“vue-vben-admin”是一个非常优秀的开源示例工程。它不仅涵盖了本文提到的技术要点还包含了更多高级特性如权限控制等实际应用场景下的考量因素。 运行此模板前先克隆仓库到本地再按照常规流程执行必要的环境准备步骤即能体验整个系统的运作情况: ```bash git clone https://github.com/anncwb/vue-vben-admin.git cd vue-vben-admin yarn install yarn serve ``` 以上就是针对您询问有关如何将Vue3,Vite,AntDesignVue以及TypeScript结合起来建立前端开发环境的一个概述说明[^1].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值